我目前正在学习AngularJS,很难理解ng-bind和ng-model之间的区别。
谁能告诉我它们有什么不同,什么时候应该用一个而不是另一个?
我目前正在学习AngularJS,很难理解ng-bind和ng-model之间的区别。
谁能告诉我它们有什么不同,什么时候应该用一个而不是另一个?
当前回答
如果您在使用ng-bind还是ng-model之间犹豫不决,请尝试回答以下问题:
只需要显示数据吗?
是:ng-bind(单向绑定) No: ng-model(双向绑定)
您需要绑定文本内容(而不是值)吗?
是的:ng-bind No: ng-model(你不应该在需要value的地方使用ng-bind)
你的标签是HTML <input>?
是:ng-model(你不能使用ng-bind <input>标签) 没有:ng-bind
其他回答
ngModel通常使用输入标签来绑定一个变量,我们可以在控制器和html页面中更改变量,但ngBind用于在html页面中显示变量,我们可以只从控制器和html显示变量来更改变量。
Ng-bind有单向数据绑定($scope——>视图)。它有一个快捷键{{val}} 它显示范围值$scope。Val插入到HTML中,Val是一个变量名。
Ng-model旨在放在表单元素内部,并具有双向数据绑定($scope—>视图和view—> $scope),例如<input Ng-model ="val"/>。
我们可以使用ng-bind与<p>显示,我们可以使用ng-bind {{model}}的快捷方式,我们不能使用ng-bind与html输入控件,但我们可以使用ng-bind {{model}}与html输入控件的快捷方式。
<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
Hello {{name}}
<p ng-bind="name"</p>
ngModel ngModel指令将输入、选择、文本区域(或自定义表单控件)绑定到作用域上的属性。
该指令的优先级为1。
例子恰好
JAVASCRIPT
angular.module('inputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.val = '1';
}]);
CSS
.my-input {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
background: transparent;
}
.my-input.ng-invalid {
color:white;
background: red;
}
HTML
<p id="inputDescription">
Update input to see transitions when valid/invalid.
Integer is a valid value.
</p>
<form name="testForm" ng-controller="ExampleController">
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
aria-describedby="inputDescription" />
</form>
ngModel负责:
将视图绑定到模型中,其他指令如 输入,文本区域或选择要求。 提供验证行为(即所需的,数字,电子邮件,url)。 保持控件的状态(有效/无效,脏/原始, 触碰/未碰,验证错误)。 在元素上设置相关的css类(ng-valid, ng-invalid, Ng-dirty, ng-pristine, ng-touched, ng-touched)包括 动画。 将控件注册到其父窗体。
ngBind ngBind属性告诉Angular用给定表达式的值替换指定HTML元素的文本内容,并在表达式的值发生变化时更新文本内容。
该指令的优先级为0。
例子恰好
JAVASCRIPT
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);
HTML
<div ng-controller="ExampleController">
<label>Enter name: <input type="text" ng-model="name"></label><br>
Hello <span ng-bind="name"></span>!
</div>
ngBind负责:
元素替换指定HTML元素的文本内容 给定表达式的值。
如果您在使用ng-bind还是ng-model之间犹豫不决,请尝试回答以下问题:
只需要显示数据吗?
是:ng-bind(单向绑定) No: ng-model(双向绑定)
您需要绑定文本内容(而不是值)吗?
是的:ng-bind No: ng-model(你不应该在需要value的地方使用ng-bind)
你的标签是HTML <input>?
是:ng-model(你不能使用ng-bind <input>标签) 没有:ng-bind