単純な入力テキストボックスの値を以下の「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は「Angularway」について説明しましたが、本当にこの作業を行う必要がある場合は、@urbanekが最近ng-initを使用した回避策を投稿しました。
<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">
https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ
inputディレクティブをオーバーライドすると、うまくいくようです。DanHunsakerのコードにいくつかの小さな変更を加えました。
$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を使用して既存のフォームを拡張しようとしている場合は、フォームから値を取得し、ディレクティブを使用してリンク時にスコープに保存できます。その後、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}}
これはtextareasでも機能し、ドロップダウンを選択することに注意してください。
<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}
更新：私の最初の答えは、コントローラーにDOM対応のコードを含めることでした。これは、HTMLを優先してAngularの規則を破ります。@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)、属性をAngular式として扱うことを含めて、属性をさらにvalue活用することができます（ただし、個人的には、別の[custom]属性を使用する可能性があります。したがって、標準の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-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:'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-modelを、ng-value/valueを設定する親要素に設定する必要があることです。Angularが述べたように：
これは主にinput[radio]要素とoption要素で使用されるため、要素が選択されると、その要素（またはそのselect親要素）の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ビデオを参照しました