回答:
これは望ましい動作です。モデルをビューではなくコントローラーで定義する必要があります。
<div ng-controller="Main">
<input type="text" ng-model="rootFolders">
</div>
function Main($scope) {
$scope.rootFolders = 'bob';
}Vojtaは "Angular way"について説明しましたが、本当にこれを機能させる必要がある場合は、@ urbanekが最近ng-initを使用して回避策を投稿しました。
<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ
value="Bob"inputタグにパーツが必要ないことを確認しました。
inputディレクティブをオーバーライドすることで、その仕事ができるようです。Dan Hunsakerのコードにいくつかの小さな変更を加えました。
$parse().assign()ngModel属性のないフィールドで使用する前にngModelのチェックを追加しました。assign()関数のパラメーターの順序を修正しました。app.directive('input', function ($parse) {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if (attrs.ngModel && attrs.value) {
$parse(attrs.ngModel).assign(scope, attrs.value);
}
}
};
});これを行う正しいAngularの方法は、フォームテンプレートに単一ページアプリAJAXを記述し、モデルから動的に入力することです。モデルは真実の唯一の情報源であるため、モデルはデフォルトではフォームから入力されません。代わりに、Angularは別の方法でモデルからフォームにデータを入力しようとします。
アプリを作成している場合は、かなり大きなアーキテクチャの変更が必要になる可能性があります。Angularを使用して既存のフォームを拡張しようとしている場合は、1ページのアプリ全体を最初から作成するのではなく、フォームから値をプルし、ディレクティブを使用してリンク時にスコープに保存できます。その後、Angularはスコープの値をフォームにバインドし、同期を保ちます。
比較的単純なディレクティブを使用して、フォームから値をプルし、現在のスコープにロードできます。ここでは、initFromFormディレクティブを定義しました。
var myApp = angular.module("myApp", ['initFromForm']);
angular.module('initFromForm', [])
.directive("initFromForm", function ($parse) {
return {
link: function (scope, element, attrs) {
var attr = attrs.initFromForm || attrs.ngModel || element.attrs('name'),
val = attrs.value;
if (attrs.type === "number") {val = parseInt(val)}
$parse(attr).assign(scope, val);
}
};
});モデル名を取得するためにいくつかのフォールバックを定義したことがわかります。このディレクティブをngModelディレクティブと組み合わせて使用するか、必要に応じて$ scope以外のものにバインドできます。
次のように使用します。
<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}これはテキストエリアでも機能し、ドロップダウンを選択することに注意してください。
<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}input="text"ます。あなたが持っている場合、numberそれはスローされますモデルはタイプnumber docs.angularjs.org/error/ngModel/numfmt?p0=333
if (attrs.type === "number") val = parseInt(val);
更新：私の元の答えには、コントローラーの使用がDOM対応のコードが含まれているため、Angularの慣習に違反してHTMLが使用されています。@dmackermanは私の回答のコメントでディレクティブに言及していましたが、今までそれを完全に逃しました。その入力で、これが正しい Angular または HTMLの規則に違反せずにこれを行う方法をます。
両方を取得する方法もあります。要素の値を取得し、それを使用してディレクティブのモデルを更新します。
<div ng-controller="Main">
<input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40" />
</div>その後：
app.directive('input', ['$parse', function ($parse) {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if(attrs.value) {
$parse(attrs.ngModel).assign(scope, attrs.value);
}
}
};
}]);もちろん、上記のディレクティブを変更して、 value、モデルをその値に設定する前に属性を活用するます。たとえば$parse(attrs.value, scope)、value属性をAngular式として扱うために使用することもできます（個人的には、そのために別の[カスタム]属性を使用します）したがって、標準のHTML属性は常に定数として扱われます）。
また、テンプレート化されたデータをng-modelで利用できるようにすることについても同様の質問があります。
AngularJs ngModelディレクティブを使用する場合、value属性の値はngModelフィールドにバインドされないことに注意してください。自分で初期化する必要があり、それを行う最善の方法は、
<input type="text"
id="rootFolder"
ng-init="rootFolders = 'Bob'"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>これは以前の回答を少し変更したものです...
$ parseは必要ありません
angular.directive('input', [function () {
'use strict';
var directiveDefinitionObject = {
restrict: 'E',
require: '?ngModel',
link: function postLink(scope, iElement, iAttrs, ngModelController) {
if (iAttrs.value && ngModelController) {
ngModelController.$setViewValue(iAttrs.value);
}
}
};
return directiveDefinitionObject;
}]);こんにちはモデルの初期化で以下のメソッドを試すことができます。
ここでは、テキストボックスのngモデルを2つの方法で初期化できます
-ng-initを使用
-jsで$ scopeを使用
<!doctype html>
<html >
<head>
<title>Angular js initalize with ng-init and scope</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="app" >
<h3>Initialize value with ng-init</h3>
<!-- Initlialize model values with ng-init -->
<div ng-init="user={fullname:'Bhaskar Bhatt',email:'bhatt.bhaskar88@gmail.com',address:'Ahmedabad'};">
Name : <input type="text" ng-model="user.fullname" /><br/>
Email : <input type="text" ng-model="user.email" /><br/>
Address:<input type="text" ng-model="user.address" /><br/>
</div>
<!-- initialize with js controller scope -->
<h3>Initialize with js controller</h3>
<div ng-controller="alpha">
Age:<input type="text" name="age" ng-model="user.age" /><br/>
Experience : <input type="text" name="experience" ng-model="user.exp" /><br/>
Skills : <input type="text" name="skills" ng-model="user.skills" /><br/>
</div>
</body>
<script type="text/javascript">
angular.module("app",[])
.controller("alpha",function($scope){
$scope.user={};
$scope.user.age=27;
$scope.user.exp="4+ years";
$scope.user.skills="Php,javascript,Jquery,Ajax,Mysql";
});
</script>
</html> 問題は、ng-value / valueを設定する場所の親要素にng-modelを設定する必要があることです。Angularが述べたように：
これは主にinput [radio]およびoption要素で使用されるため、要素が選択されると、その要素（またはその選択親要素）のngModelがバインドされた値に設定されます。
例：これは実行されたコードです：
<div class="col-xs-12 select-checkbox" >
<label style="width: 18em;" ng-model="vm.settingsObj.MarketPeers">
<input name="radioClick" type="radio" ng-click="vm.setPeerGrp('market');"
ng-value="vm.settingsObj.MarketPeers"
style="position:absolute;margin-left: 9px;">
<div style="margin-left: 35px;color: #717171e8;border-bottom: 0.5px solid #e2e2e2;padding-bottom: 2%;">Hello World</div>
</label>
</div>注：この上記のケースでは、ng-modelとその値に対するJSON応答がすでにあったため、JSオブジェクトに "MarketPeers"として別のプロパティを追加しています。したがって、モデルと値は必要に応じて異なる可能性がありますが、ng-modelとvalueの両方を持ち、同じ要素にそれらを持たないようにすることで、このプロセスは役立つと思います。
同様の問題がありました。を使用value="something"して表示および編集することができませんでした。<input>宣言されているモデルとともに、以下のコマンドを使用する必要がありました。
[(ngModel)]=userDataToPass.pinCodeオブジェクト内のデータのリストuserDataToPassと、表示および編集する必要があるアイテムはどこにありますかpinCode。
同じように、私はこのYouTubeビデオを参照しました