Answers:
这是理想的行为,您应该在控制器中而不是在视图中定义模型。
<div ng-controller="Main">
<input type="text" ng-model="rootFolders">
</div>
function Main($scope) {
$scope.rootFolders = 'bob';
}
Vojta描述了“角度方式”,但是如果您真的需要进行这项工作,@ urbanek最近使用ng-init发布了一种解决方法:
<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">
https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ
value="Bob"
输入标签中的一部分。
覆盖输入指令似乎确实可以完成任务。我对Dan Hunsaker的代码做了一些小的改动:
$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方法是在表单模板中编写一个单页应用程序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}}
if (attrs.type === "number") val = parseInt(val);
更新:我最初的答案是让控制器包含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
在将模型设置为其值之前对属性做更多的事情,包括使用$parse(attrs.value, scope)
将该value
属性视为Angular表达式(尽管我个人可能会为此使用不同的[custom]属性,因此标准HTML属性始终被视为常量)。
另外,在使模板化的数据可用于ng-model方面也存在类似的问题,这可能也很有趣。
如果使用AngularJs ngModel指令,请记住value
attribute 的值不绑定在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元素,因此当选择元素时,该元素(或其选择父元素)的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模型和值,但不要将它们放在同一元素上。
我有类似的问题。我无法value="something"
用来显示和编辑。我必须<input>
在声明的ng模型中使用以下命令。
[(ngModel)]=userDataToPass.pinCode
我在对象中具有数据列表的位置userDataToPass
以及需要显示和编辑的项目是pinCode
。
同样,我提到了这个YouTube视频