使用AngularJS，如果我设置一个简单的输入文本框值为如下所示的“bob”。如果添加了ng-model属性，则不显示该值。
<input type="text"
id="rootFolder"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
有人知道一种简单的方法来默认这个输入并保留ng-model吗?我尝试使用默认值ng-bind，但这似乎也不起作用。
当前回答
重写输入指令似乎完成了这项工作。我对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);
}
}
};
});
其他回答
重写输入指令似乎完成了这项工作。我对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);
}
}
};
});
问题是您必须将ng-model设置为父元素，设置为您想要设置ng-value/value的位置。 正如Angular提到的:
它主要用于输入[radio]和选项元素，因此当元素被选中时，该元素(或其选择父元素)的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和值，但不把它们放在同一个元素上。
这是期望的行为，你应该在控制器中定义模型，而不是在视图中。
<div ng-controller="Main">
<input type="text" ng-model="rootFolders">
</div>
function Main($scope) {
$scope.rootFolders = 'bob';
}
如果你使用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;
}]);
