AngularJS - ng-modelが使用されている場合、入力テキストボックスのValue属性は無視されますか？
単純なテキスト入力ボックスの値を以下の "bob"のように設定した場合はAngularJSを使用します。 ng-model属性が追加されている場合、値は表示されません。
<input type="text"
id="rootFolder"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
誰かがこの入力をデフォルトの何かにしてng-modelを維持する簡単な回避策を知っていますか？私はデフォルト値でng-bindを使用しようとしました、しかしそれはまたうまくいかないようです。
これは望ましい動作です。モデルをビューではなくコントローラーで定義する必要があります。
<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
入力ディレクティブをオーバーライドしても、うまくいくようです。 Dan Hunsaker のコードに若干の変更を加えました。
- NgModel属性のないフィールドで
$parse().assign()を使用しようとする前に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の方法
これを行う正しいAngular方法は、フォームテンプレートに単一ページのアプリケーションAJAXを記述してから、モデルから動的に入力することです。モデルは真実の唯一の情報源であるため、モデルはデフォルトではフォームから取り込まれません。代わりにAngularは反対の方向に進み、モデルからフォームに入力しようとします。
ただし、最初からやり直す時間はありません。
あなたが書いたアプリをお持ちの場合、これにはかなり大きなアーキテクチャの変更が必要になるかもしれません。 1ページのアプリケーション全体を最初から作成するのではなく、Angularを使用して既存のフォームを拡張しようとしている場合は、フォームから値を取得してリンク時にスコープに格納できます。指令。 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}}
AngularJsのngModelディレクティブを使用する場合、value attribute の値はngModelフィールド にバインドされないことを覚えておいてください。
<input type="text"
id="rootFolder"
ng-init="rootFolders = 'Bob'"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
更新： 私の最初の答えは、HTMLに有利なAngularの規則を破るDOM対応のコードをコントローラに含ませることでした。 @dmackermanは私の答えに対するコメントでディレクティブを述べました、そして私は今まで完全にそれを逃しました。その入力で、これはAngular または HTMLの規則を破ることなくこれを行うためのright方法です：
両方を取得する方法もあります - 要素の値を取得し、それを使用してディレクティブでモデルを更新します。
<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属性をAngular式として扱うために$parse(attrs.value, scope)を使用するなど、モデルをその値に設定する前にvalue属性を使用して上記のディレクティブを変更することももちろん可能です（おそらく別のものを使用します）そのための[custom]属性は、個人的には、標準のHTML属性は常に定数として扱われます。
また、 でテンプレート化されたデータをng-modelで利用可能にすることについても同様の問題があります これも興味深いかもしれません。
これは以前の答えを少し修正したものです。
$ 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-value/valueを設定したい場所に、ng-modelを親要素に設定する必要があることです。 Angularが述べたように：
これは主にinput [radio]とoption要素で使われるので、その要素が選択されると、その要素（またはそのselectの親要素）のngModelはbound値に設定されます。
例：これは実行されたコードです：
<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>
注：上記のケースでは、私はいつもngon-modelとその値に対するJSONの応答を得ました。私はJSオブジェクトに "MarketPeers"として別のプロパティを追加しています。そのため、モデルと値は必要性に応じて変わる可能性がありますが、このプロセスは、ng-modelと値の両方を持つが同じ要素には持たないようにするのに役立つと思います。
やあモデルの初期化と以下のメソッドを試すことができます。
こちらでテキストボックスのng-modelを双方向に初期化できます
- 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:'[email protected]',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>
私は同様の問題を抱えていました。表示や編集にvalue="something"を使うことができませんでした。宣言されているモデルと一緒に<input>along内でbelowコマンドを使用する必要がありました。
[(ngModel)]=userDataToPass.pinCode
オブジェクトuserDataToPass内のデータのリストがあり、表示および編集する必要がある項目はpinCodeです。
同じように、私は このYouTubeビデオを参照しました