Question

我是angularjs / javascript的新手，因此遇到以下问题。我尝试在js中设置选择的ng-model，但是在html中未显示“ selectedValue”。

请帮助！

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="selectedName" ng-options="o.name for o in selectNameOptions">
    </select>

    <br/>
    <br/>
    <i>selectedAccount: {{selectedName}}</i>
    <br/>
    <br/>
    <i>selectAccountOptions: {{selectNameOptions}}</i>
    <br/>
  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {

      var name1 = {
        name: "Emil",
        age: 25,
        label: "Emil 25"
      };
      var name2 = {
        name: "Tobias",
        age: 20,
        label: "Tobias 20"
      };
      var name3 = {
        name: "Linus",
        age: 15,
        label: "Linus 15"
      };
      $scope.selectNameOptions = [name1, name2, name3];

      // set emil as intial selection
      $scope.selectedName = {
        name: "Emil",
        age: 25,
        label: "Emil 25"
      };

    });
  </script>

  <p>"Emil" is not selected, eventhough i have indicated the object in js.</p>

</body>

</html>

Answer 1

问题是您要向$scope.selectedName分配一个新对象。尽管它匹配内部的所有值，但它仍然不是同一对象。

Angular通过对象的引用来匹配它们。因此，快速解决问题的方法是将name1分配给$scope.selectedName。请参见以下代码段中的修复程序：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  var name1 = {
    name: "Emil",
    age: 25,
    label: "Emil 25"
  };
  var name2 = {
    name: "Tobias",
    age: 20,
    label: "Tobias 20"
  };
  var name3 = {
    name: "Linus",
    age: 15,
    label: "Linus 15"
  };

  $scope.selectNameOptions = [name1, name2, name3];

  // set emil as intial selection
  $scope.selectedName = name1;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedName" ng-options="o.name for o in selectNameOptions">
  </select>
  <br/>
  <br/>
  <i>selectedAccount: {{selectedName}}</i>
  <br/>
  <br/>
  <i>selectAccountOptions: {{selectNameOptions}}</i>
  <br/>
</div>

更明智的解决方法是使用对象的唯一标识符（例如name）作为select框的值。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  var name1 = {
    name: "Emil",
    age: 25,
    label: "Emil 25"
  };
  var name2 = {
    name: "Tobias",
    age: 20,
    label: "Tobias 20"
  };
  var name3 = {
    name: "Linus",
    age: 15,
    label: "Linus 15"
  };

  $scope.selectNameOptions = [name1, name2, name3];

  // set emil as intial selection
  $scope.selectedName = 'Emil';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedName" ng-options="o.name as o.label for o in selectNameOptions">
  </select>
  <br/>
  <br/>
  <i>selectedAccount: {{selectedName}}</i>
  <br/>
  <br/>
  <i>selectAccountOptions: {{selectNameOptions}}</i>
  <br/>
</div>

请参考this link，以详细了解ng-options指令。

Answer 2

实际上，您正在创建具有相同值的新对象。但是它们是位于不同位置的不同对象。修改如下代码，并将selectedName设置为上一个对象，而不是创建一个新对象。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="selectedName" ng-options="o.name for o in selectNameOptions">
    </select>

    <br/>
    <br/>
    <i>selectedAccount: {{selectedName}}</i>
    <br/>
    <br/>
    <i>selectAccountOptions: {{selectNameOptions}}</i>
    <br/>
  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {

      var name1 = {
        name: "Emil",
        age: 25,
        label: "Emil 25"
      };
      var name2 = {
        name: "Tobias",
        age: 20,
        label: "Tobias 20"
      };
      var name3 = {
        name: "Linus",
        age: 15,
        label: "Linus 15"
      };
      $scope.selectNameOptions = [name1, name2, name3];

      // set emil as intial selection
      $scope.selectedName = name1;

    });
  </script>

  <p>"Emil" is not selected, eventhough i have indicated the object in js.</p>

</body>

</html>

无法在HTML中设置<select>的ng-model

2 个答案: