使用 Angular 匹配 ng-model 和 ng-options答案

【问题标题】：Matching ng-model and ng-options with Angular使用 Angular 匹配 ng-model 和 ng-options
【发布时间】：2016-09-24 23:47:52
【问题描述】：

在我的控制器中，我有一个模型和一个这样的数组：

 $scope.myModel = {
   title:'title',
   descr:'descr',
   id: ''
 };

 $scope.arrayOption = [
   {id: 1, text:"aaaaaaa"},
   {id: 2, text:"bbbbbbb"}
 ];

在我的 html 文件中，我有这个选择输入

  <select ng-model="myModel.id" ng-options="item.text for item in arrayOption"></select>

当我更改所选值时，我想用 arrayOption 中的 id 值更新我的模型 (myModel.id)。

通过上面的代码，myModel.id 的内容是整个对象，而不仅仅是 id 字段。

你能帮帮我吗？

这里是 plnkr demo

【问题讨论】：

标签： angularjs

【解决方案1】：

您应该更改您的 ng-model 绑定以将所选值直接绑定到模型，而不是其属性。

<select ng-model="myModel" ng-options="item.text for item in arrayOption">
</select>

见plunkr。

如果这不是您想要的，并且您想同时映射 id 和文本，则应考虑将 arrayOptions 从文本更新为标题以匹配模型的预期结构。

<select ng-options="item as item.title for item in arrayOption track by item.id"
    ng-model="myModel">
</select>

【讨论】：

通过这种方式，我从模型中删除了“标题”和“描述”值。除了他们，我还想要 id。
@robb 我的第二个选项将允许您至少保留一些数据。但是，如果您想以这种方式混合两种不同的数据结构，那么您需要一个完全独立的模型，并且您必须在某个时候手动将其映射到您的标题/描述模型。

【解决方案2】：

你正在替换你的模型！

  <!DOCTYPE html>
        <html ng-app="plunker">
          <head>
            <meta charset="utf-8" />
            <title>AngularJS Plunker</title>
            <link href="style.css" rel="stylesheet" />
            <script data-semver="1.2.19" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" data-require="angular.js@1.2.x"></script>
            <script src="app.js"></script>
          </head>

          <body ng-controller="MainCtrl">

              {{myModel.title}}
              <br>
              {{myModel.descr}}
              <br>
              {{myModel.id}} <br>

              <select ng-change="change(temp)" ng-model="temp" ng-options="item.text for item in arrayOption"></select>

          </body>

        </html>

和JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.myModel = {
    title:'title',
    descr:'descr',
    id: ''
  };

  $scope.arrayOption = [
    {id: 1, text:"aaaaaaa"},
    {id: 2, text:"bbbbbbb"}
  ];

  $scope.change = function(temp){
    $scope.myModel.id = temp.id;
  }

});

Here Is Your Plnkr Solution!

【讨论】：

【解决方案3】：

或者更简单！！！

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.2.19" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" data-require="angular.js@1.2.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

      {{myModel.title}}
      <br>
      {{myModel.descr}}
      <br>
      {{myModel.id}} <br>

      <select ng-change="myModel.id = temp.id" ng-model="temp" ng-options="item.text for item in arrayOption"></select>

  </body>

</html>

【讨论】：

【解决方案4】：

我试过这个解决方案：

 <select ng-model="myModel.id" ng-options="item.id as item.text for item in arrayOption"></select>

效果很好！这里是updated plunker。

谢谢大家！

【讨论】：