Angularjs - 如何使用NG-重复选择？ [英] Angularjs - how to use select with ng-repeat?

问题描述

在下面可我想选择下拉框中根据当前NG-重复对象（用户）提供一个键（colorId）值的看法。有谁知道该怎么做？

 ＆LT; D​​IV NG-应用＆GT;
  ＆LT; D​​IV NG控制器=MyCntrl＆GT;
    ＆LT;表＆gt;
        ＆LT;＆THEAD GT;
                ＆所述; TR＆GT;
                    百分位宽度=50％＆gt;用户＆LT; /第i
                    百分位宽度=50％＆GT;颜色和LT; /第i
                ＆LT; / TR＆GT;
          ＆LT; / THEAD＆GT;
     ＆LT;＆TBODY GT;
         ＆LT; TR NG重复=用户用户＆GT;
             ＆所述; TD宽度=50％＆GT; {{user.name}}＆下; / TD＆GT;
             ＆所述; TD宽度=50％＆GT;
                 ＆LT;选择NG模型=user.coloridNG选项=color.name颜色在色＆GT;
                          ＆LT;期权价值=＆GT;选择颜色＆LT; /选项＆GT;
        ＆LT; /选择＆GT;
             ＆LT; / TD＆GT;
         ＆LT; / TR＆GT;
      ＆LT; / TBODY＆GT;
    ＆LT; /表＆gt;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

控制器code是：

 使用严格的;angular.module（网元，）
  .controller（'MyCntrl'，['$范围'，函数（$范围）{
   $ scope.colors = [
    {ID：1，名称：'蓝'}，
    {ID：'2'，名称：白}，
    {ID：'2'，名称：'红'}
  ];    $ scope.users = [
        {名称：'用户1'，colorId：1}，
        {名：用户2，colorId：'2'}
    ];
}]）;
 

解决方案

您需要修复的几件事情你的＆LT;选择＆GT; 元素：

使用 color.id作为你NG选项color.name 。

  NG选项=color.id作为color.name于色的颜色
 

您typoedcolorid

  NG-模式=user.colorId
 

下面是它的工作一个普拉克：<一href=\"http://plnkr.co/edit/DptvZuamWv9waFzI0Rcp?p=$p$pview\">http://plnkr.co/edit/DptvZuamWv9waFzI0Rcp?p=$p$pview

In the view available below I'm trying to select a value in the drop down box based on a key(colorId) available in the current ng-repeat object(user). Does anyone know how to do that?

<div ng-app>
  <div ng-controller="MyCntrl">
    <table>
        <thead >
                <tr>
                    <th width="50%">User</th>
                    <th width="50%" >Color</th>            
                </tr>
          </thead>
     <tbody>
         <tr ng-repeat="user in users">
             <td width="50%">{{user.name}}</td>
             <td width="50%"> 
                 <select ng-model="user.colorid" ng-options="color.name for color in colors">
                          <option value="">Select color</option>
        </select>
             </td>
         </tr>  
      </tbody>
    </table>
  </div>
</div>

The controller code is:

'use strict';

angular.module('nes',)
  .controller('MyCntrl',['$scope',function ($scope) {
   $scope.colors = [
    {id:'1', name:'blue'},
    {id:'2', name:'white'},
    {id:'2', name:'red'}
  ];

    $scope.users = [
        { name:'user1',colorId:'1'},
        { name:'user2',colorId:'2'}
    ];
}]);   

解决方案

You need to fix a few things in your <select> element:

use color.id as color.name in your ng-options.

ng-options="color.id as color.name for color in colors"

you typoed "colorid":

ng-model="user.colorId"

Here's a plunk of it working: http://plnkr.co/edit/DptvZuamWv9waFzI0Rcp?p=preview

这篇关于Angularjs - 如何使用NG-重复选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！