AngularJS – 在使用ng模型时，input文本框的Value属性会被忽略？
如果我将一个简单的input文本框值设置为像下面的“bob”那样使用AngularJS。 如果添加了ng-model属性，则不会显示该值。
<input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40"/>
任何人都知道一个简单的解决scheme，以默认input的东西，并保持ng-model ？ 我试图使用ng-bind与默认值，但似乎不工作。
这是期望的行为，您应该在控制器中定义模型，而不是在视图中。
<div ng-controller="Main"> <input type="text" ng-model="rootFolders"> </div> function Main($scope) { $scope.rootFolders = 'bob'; }
Vojta描述了“Angular方式”，但是如果你确实需要这样做的话，@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指令似乎做的工作。 我对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，然后从模型中dynamic填充它。 该模型默认情况下不是从表单填充的，因为该模型是单一事实的来源。 相反，Angular将采取另一种方式，并尝试从模型中填充表单。
但是，如果你没有时间从头开始
如果你有一个应用程序编写，这可能涉及一些相当大的架构变化。 如果您正尝试使用Angular来增强现有表单，而不是从头开始构build整个单页面应用程序，则可以使用指令从表单中提取值并将其存储在范围内。 然后，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，select下拉菜单。
<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea> {{toaster.test}}
更新：我的原始答案涉及让控制器包含DOM感知的代码，它打破了有利于HTML的Angular约定。 @dmackerman在回答我的评论时提到了指令，直到现在，我完全错过了。 有了这个input，下面是在不违反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属性作为一个Angularexpression式（尽pipe我可能会使用个人而言，这是一个不同的[自定义]属性，所以标准的HTML属性一直被视为常量）。
此外，在使数据模板化可用于ng模型中也存在类似的问题，这也可能是有意义的。
如果您使用AngularJs ngModel指令，请记住value属性的value 不会绑定在ngModel字段上 。您必须自行初始化，最好的方法是
<input type="text" id="rootFolder" ng-init="rootFolders = 'Bob'" ng-model="rootFolders" disabled="disabled" value="Bob" size="40"/>
这是以前的答案略有修改…
没有必要$parsing
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模型
– 使用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模型设置为父元素，以便设置ng值/值。 正如Angular所说：
它主要用于input[radio]和选项元素，所以当select元素时，该元素（或其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模型和值的JSON响应，我只是将另一个属性作为“MarketPeers”添加到JS对象中。 因此，模型和价值可能会根据需要而定，但我认为这个过程将有助于同时具有ng模型和价值，但不具有它们在相同的元素上。
