使用AngularJS，如果我设置一个简单的输入文本框值为如下所示的“bob”。如果添加了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的方式”，但如果你真的需要让这个工作，@urbanek最近发布了一个使用ng-init的变通方法:
<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">
https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ
更新:我最初的答案是让控制器包含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之前，您可以修改上面的指令，以对value属性做更多的操作，包括使用$parse(attrs。将value属性视为Angular表达式(尽管我个人可能会使用不同的[自定义]属性，因此标准HTML属性始终被视为常量)。
此外，还有一个类似的问题，在使数据模板可用ng-model，这可能也是感兴趣的。
重写输入指令似乎完成了这项工作。我对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会走另一条路，尝试从模型填充表单。
然而，如果你没有时间从头开始
如果你编写了一个应用程序，这可能涉及一些相当大的架构更改。如果你想用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}}
这是对之前答案的轻微修改。
不需要$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;
}]);
如果你使用AngularJs的ngModel指令，记住value属性的值不会绑定在ngModel字段上。你必须自己初始化它，最好的方法是
<input type="text"
id="rootFolder"
ng-init="rootFolders = 'Bob'"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
嗨，你可以尝试下面的方法与初始化的模型。
这里你可以用两种方式初始化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提到的:
它主要用于输入[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和值，但不把它们放在同一个元素上。
我也有类似的问题。我不能使用value="something"来显示和编辑。 我必须在<input>中使用下面的命令，同时声明ng模型。
[(ngModel)]=userDataToPass.pinCode
其中，我有对象userDataToPass中的数据列表，我需要显示和编辑的项目是pinCode。
同样的，我参考了这个YouTube视频
