NG-选项中为角数组和对象 [英] Ng-Options in Angular for Arrays and Objects

问题描述

  

2的所有工作溶液首先：

示例1 - 阵列控制器中的

  $ scope.s1 = [
    {
        名：项目1，
        ID：1
    }，
    {
        名：项目2
        ID：2
    }
];
 

查看1

 ＆LT;选择NG模型=选择1NG选项=foo.id作为foo.name在S1富＆GT;
    ＆LT;期权价值=＆GT;选择一个值＆LT; /选项＆GT;
＆LT; /选择＆GT;
 

例2 - 对象在控制器

同样的概念可以帮助你也在这里，如果你知道myS2的名称：

  $ scope.s2 = {    myS2：[
        {
            名：项目1，
            ID：1
        }，
        {
            名：项目2
            ID：2
        }
    ]
};
 

查看2

 ＆LT;选择NG模型=选择2NG选项=foo.id作为foo.name在s2.myS2富＆GT;
        ＆LT;期权价值=＆GT;选择一个值＆LT; /选项＆GT;
 ＆LT; /选择＆GT;
 

现在的问题是：

$ scope.s2有另外的目的 {myS1：[..]到mySn：[..]} 用不同的名字和我want'to使用它们作为选项组名称？我怎样才能做到这一点在NG选项？

解决方案

我不认为你可以窝在循环NG-重复，但加入只是有点业务逻辑控制器上，你可以得到你想要的东西！

希望它帮助：）

\r

\r

（函数（窗，角）{\r
\r
  \r
  功能TestCtrl（VM，数据）{\r
    VAR的选择= [];\r
    \r
    对于（数据VAR组）{\r
      如果（data.hasOwnProperty（集团）！）{继续; }\r
      \r
      对于（VAR I = 0，len个=数据[组]。长度; I＆LT; LEN，我++）{\r
        VAR项目=数据[组] [I];\r
        \r
        item.group =组;\r
        \r
        options.push（项目）;\r
      }\r
    }\r
    \r
    vm.options =选择;\r
    \r
    vm.current =选项[0];\r
  }\r
  \r
  角\r
    .module（测试，[]）\r
    .value的（'S2'，{\r
      myS2：[\r
        {\r
          名：项目1 mys2\r
          ID：1\r
        }，\r
        {\r
          名：项目2 mys2\r
          ID：2\r
        }\r
      ]\r
      myS3：[\r
        {\r
          名：项目1 mys3\r
          ID：1\r
        }，\r
        {\r
          名：项目2 mys3\r
          ID：2\r
        }\r
      ]\r
    }）\r
    .controller（'TestCtrl'，['$范围，S2，TestCtrl]）\r
  ;\r
}）（窗口，window.angular）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
＆lt;节NG-应用=测试＆GT;\r
  ＆lt;物品NG控制器=TestCtrl＆GT;\r
    \r
    ＆LT;选择NG模型=当前NG选项=项目作为item.name组由item.group在选择项目＆GT;\r
    ＆LT; /选择＆GT;\r
  ＆LT; /条＆GT;\r
＆LT; /段＆gt;

\r

\r

\r

First of all 2 working solutions:

Example 1 - Array in Controller

$scope.s1 = [
    {
        "name": "Item1",
        "id": 1
    },
    {
        "name": "Item2",
        "id": 2
    }
];

View 1

<select ng-model="select1" ng-options="foo.id as foo.name for foo in s1">
    <option value="">Select a Value</option>
</select>

Example 2 - Object in Controller

The same concept may help you also here, if you know the name of "myS2":

$scope.s2 = {

    "myS2": [
        {
            "name"  : "Item1",
            "id"    : 1
        },
        {
            "name": "Item2",
            "id": 2
        }
    ]
};

View 2

 <select ng-model="select2" ng-options="foo.id as foo.name for foo in s2.myS2">
        <option value="">Select a Value</option>
 </select>

Now the question:

$scope.s2 has further objects {myS1:[..] to mySn:[..]} with different names and I want'to use them as option group name? How can I do that in ng-options?

解决方案

I don't think that you can nest loops in ng-repeat, but, adding just a bit of business logic on your controller you can gain what you want!

hope it helps :)

(function(window, angular) {

  
  function TestCtrl(vm, data) {
    var options = [];
    
    for(var group in data) {
      if(!data.hasOwnProperty(group)) { continue; }
      
      for(var i = 0, len = data[group].length; i < len; i++) {
        var item = data[group][i];
        
        item.group = group;
        
        options.push(item);
      }
    }
    
    vm.options = options;
    
    vm.current = options[0];
  }
  
  angular
    .module('test', [])
    .value('S2', {
      "myS2": [
        {
          "name"  : "Item1 mys2",
          "id"    : 1
        },
        {
          "name": "Item2 mys2",
          "id": 2
        }
      ],
      "myS3": [
        {
          "name"  : "Item1 mys3",
          "id"    : 1
        },
        {
          "name": "Item2 mys3",
          "id": 2
        }
      ]
    })
    .controller('TestCtrl', ['$scope', 'S2', TestCtrl])
  ;
})(window, window.angular);

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

<section ng-app="test">
  <article ng-controller="TestCtrl">
    
    <select ng-model="current" ng-options="item as item.name group by item.group for item in options">
    </select>
  </article>
</section>

这篇关于NG-选项中为角数组和对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！