javascript Angular - 使用范围变量设置 ng-model
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33420193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular - Set ng-model using scope variable
提问by user2085143
Is this something one should not do? As I am unable to get it to work.
这是不应该做的事情吗？因为我无法让它工作。
In my controller I have
在我的控制器中，我有
$scope.test = "someValue"
and in my view
在我看来
<input ng-model="test" />
What I am expecting to occur
我期待发生的事情
<input ng-model="someValue" />
However, ng-model stays as being set to "test".
但是，ng-model 保持设置为“测试”。
How do I resolve this?
我该如何解决？
回答by LordTribual
That's not the way ng-modelworks. If you have a scope variable, as in your case testand value of this variable will reflect in the value property of your input. This means that someValuewill be visible in the input. In other words: ng-modelis a directive that binds to, e.g. an input,select, textarea (or custom form control) to a property on the scope using the NgModelController.
这不是工作的方式ng-model。如果你有一个作用域变量，就像你的情况一样test，这个变量的值将反映在你的input. 这意味着someValue将在input. 换句话说：ng-model是一个指令，它使用NgModelController.
NgModelController provides API for the ngModel directive. The controller contains services for data-binding, validation, CSS updates, and value formatting and parsing
NgModelController 为 ngModel 指令提供 API。控制器包含用于数据绑定、验证、CSS 更新以及值格式化和解析的服务
Here is an example:
下面是一个例子：
var app = angular.module('myApp', []);
app.controller('TestController', TestController);
function TestController() {
var vm = this;
vm.myModel = "This is the model value";
vm.selectedOption = undefined;
vm.options = [{
id: '1',
name: 'Option A'
}, {
id: '2',
name: 'Option B'
}, {
id: '3',
name: 'Option C'
}];
};<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<body ng-app="myApp" ng-controller="TestController as vm">
<input type="text" ng-model="vm.myModel" />
<select name="mySelect" id="mySelect" ng-model="vm.selectedOption">
<option ng-repeat="option in vm.options" value="{{option.id}}">{{ option.name }}</option>
</select>
<pre ng-if="vm.selectedOption">Selected Option: {{ vm.selectedOption }}</pre>
</body>The example above also shows some best practices, means using controllerAssyntax for your view and a clear declaration of your controller signature.
上面的示例还显示了一些最佳实践，这意味着使用controllerAs视图的语法和控制器签名的明确声明。
回答by Zack Tanner
Show your controller code. However, I have demonstrated below that it should work.
显示您的控制器代码。但是，我已经在下面证明它应该有效。
angular.module('myApp', []);
angular.module('myApp').controller('myCtrl', function($scope) {
$scope.test = "somevalue";
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<form ng-controller="myCtrl">
<input type="text" ng-model="test" />
</form>
</body>ng-modeljust represents the binding object. It will not change. What changes is the value, which corresponds to the value that the ng-modelobject takes on.
ng-model只代表绑定对象。它不会改变。改变的是value，它对应于ng-model对象所取的值。
