Question

我需要使用angularjs（每个产品列表的下拉列表）在循环中创建一些下拉菜单

标准： - 它不应该创建空选项

我的问题是空选项正在创建，我无法使用ng-model为所有下拉菜单设置选项参考，请帮助

颜色属性的下拉列表

json喜欢：

function pList($scope){  
    $scope.prodList = {"products":    [{"pInfo":  {
    "color" : [{
        "name" : "red",
        "index" : "0",
        "url": "plain_50.jpg"
    },
    {
        "name" : "blue",
        "index" : "1",
         "url": "plain_20.jpg"
    }]  
 }},{"pInfo":  {
    "color" : [{
        "name" : "orange",
        "index" : "0",
         "url": "plain_10.jpg"
    },
    {
        "name" : "yellow",
        "index" : "1",
        "url": "plain_40.jpg"
    }]  
 }}
 ]
 }
    $scope.clrChange = function(val){
            console.log(val);           
    }
  }

  <article ng-repeat="prod in prodList.products" ng-init="myColor=$index">
  <select ng-model="myColor" ng-change="clrChange(myColor)">
    <option value="">select color</option>
    <option ng-repeat="color in prod.pInfo.color">{{color.name}}</option>
  </select>
</article>

Answer 1

假设来自数据库的JSON数据是这样的。
它由列表中的两个JSON对象组成。在下面，您可以看到HTML代码遍历列表中的每个JSON对象。

 {
           "requirement":[
              {
                 "contributor":"dsfs",
                 "creator":"dsfsd",
                 "description":"SDFDf",

              },
              {
                 "contributor":"rg",
                 "creator":"regre",
                 "description":"REGREg",

              }
           ]
        }




  <table style="width: 300px">
            <tr>
                <th colspan="1">contributor</th>
                <th colspan="1">creator</th>
                <th colspan="1">description</th>
            </tr>
            <tr ng-repeat = 'req in requirement.list'>
                <td colspan = "1"><input type="text" ng-readonly="true" ng-model="req.contributor"></td>
                <td colspan = "1"><input type="text" ng-readonly="true" ng-model="req.creator"></td>
                <td colspan = "1"><input type="text" ng-readonly="true" ng-model="req.description"></td>
            </tr>
    </table>

如果这是您正在寻找的，请发表评论。感谢...：）

另外，如果我没有清楚地告诉你，请详细说明你的问题......：）

Answer 2

尝试使用ng-options代替ng-repeat

<article ng-repeat="prod in prodList.products">
    <select ng-model="prod.color" ng-options="color.name for color in prod.pInfo.color" ng-change="clrChange(prod.color)">
        <option value="">select color</option>
    </select>
</article>

<强> Plunker DEMO

使用带有ng-repeat的angularjs在循环中创建下拉列表

2 个答案: