Angular-使用范围变量设置ng模型

Angular - Set ng-model using scope variable

本文关键字：ng 模型 设置 变量 使用范围 Angular-      更新时间：2023-09-26

这是不应该做的事情吗？因为我无法让它工作。

在我的控制器中，我有

$scope.test = "someValue"

在我看来

<input ng-model="test" />

我所期望的

<input ng-model="someValue" />

然而，ng模型仍然被设置为"测试"。

如何解决此问题？

ng-model不是这样工作的。如果您有一个作用域变量，如test，该变量的值将反映在input的value属性中。这意味着someValue将在input中可见。换句话说：ng-model是一个指令，它使用NgModelController绑定到作用域上的属性，例如输入、选择、文本区域（或自定义表单控件）。

NgModelController为ngModel指令提供API。这个控制器包含用于数据绑定、验证、CSS的服务更新以及值格式化和解析

这里有一个例子：

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>

上面的示例还显示了一些最佳实践，即对视图使用controllerAs语法，并明确声明控制器签名。

显示控制器代码。然而，我在下面已经证明了它应该有效。

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-model只是表示绑定对象。它不会改变。改变的是value，它对应于ng-model对象的值。

相关文章：