Question

在下面的代码中，当我删除ng-model时，下拉列表中没有任何内容，但是，当我添加ng-model时，我可以看到下拉列表中的内容。这让我对ng模型的作用感到很困惑，在这种情况下，我想只添加ng-options，它会起作用但实际上不行。

以下是代码：

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
    <style type="text/css">
      * {
        box-sizing: border-box;
      }

      body {
        font: 16px/1.5 sans-serif;
        color: #222;
        margin: 5em;
      }

      select {
        width: 40%;
      }

    </style>
  </head>

  <body>

    <div ng-controller="Option">
      <select 
              ng-model= "aa"
              ng-options="person.name for person in people">
        <option value="">Choose a person</option>
      </select>

    </div>


    <script type="text/javascript">

      var Option = function ($scope) {
        $scope.people = [
          {name: "Tom", number: "0199"},
          {name: "Justin", number: "0199"},
          {name: "Jelly", number: "0199"},
        ];
      };

    </script>
  </body>
</html>

Answer 1

它是您的模型和显示控件之间的粘合剂。但是，aslo做了其他一些事情：

ngModel负责：

将视图绑定到模型中，其他指令如 input，textarea或select require。
提供验证行为（即必填，数字，电子邮件，网址）。
保持控件的状态（有效/无效，脏/原始，验证错误）。
在元素上设置相关的css类（ng-valid，ng-invalid， ng-dirty，ng-pristine）。
使用其父表单注册控件。

如文档here中所述。

Answer 2

ng-model类似于控件的名称或 id 或属性（已选中）

ng-options类似选择标记的选项标记

和ng-model有助于显示所选或默认选项值

您的代码应该如下所示

html

<select ng-model= "aa" ng-options="person.name for person in people"></select>

Js代码

<script type="text/javascript">

      var Option = function ($scope) {
        $scope.people = [
          {name: "Choose a person", number: ""},
          {name: "Tom", number: "0199"},
          {name: "Justin", number: "0199"},
          {name: "Jelly", number: "0199"},
        ];
       $scope.aa= $scope.people[0];
      };

    </script>

AngularJS ng-model的作用是什么？

2 个答案: