Angular - 使用作用域变量设置ng-model

Question

Angular - 使用作用域变量设置ng-model

5

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

在我的控制器中，我有以下代码：

$scope.test = "someValue"

在我的看法中

<input ng-model="test" />

我希望发生的事情是什么。

<input ng-model="someValue" />

然而，ng-model仍然被设置为“test”。我该如何解决这个问题？

- user2085143

你想设置的属性是什么？还是说文本值应该是“someValue”？ - Harshal Carpenter

2个回答

0

展示你的控制器代码。然而，我已经在下面演示了它应该可以工作。

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 对象所取得的值。

- Zack Tanner

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LordTribual · Accepted Answer

这不是ng-model的工作方式。如果你有一个作用域变量，比如你的test，那么这个变量的值将反映在你的input的value属性中。这意味着someValue将在input中可见。换句话说：ng-model是一个指令，它将input、select、textarea（或自定义表单控件）绑定到作用域上的属性，使用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语法来定义你的视图，并清晰地声明你的控制器签名。