角度 - 在ng-repeat

时间:2017-06-06 10:38:25

标签: angularjs angularjs-ng-repeat

我在ng-repeat内部选择时出现问题,问题是我在ng-repeat中创建的每个选项都被禁用,如果我尝试打开下拉列表,它就不会显示选项。

选择是在ng-repeat中生成的,选择的数量和所有值都是 在JSON中。

我认为问题可能是选择模型,我必须动态分配ng模型,但我不知道如何。

这是代码(我不包含获取JSON的服务,但它确实有效)

JSON

[  
   {  
      "Id":1,
      "Name":"Tipo Fuga",
      "Values":[  
         {  
            "Name":"Tipo Fuga",
            "Value":"Week End in Famiglia",
            "Id":10555
         },
         {  
            "Name":"Tipo Fuga",
            "Value":"Fuga romantica",
            "Id":10560
         }
      ]
   },
   {  
      "Id":2,
      "Name":"Localita",
      "Values":[  
         {  
            "Name":"Localita",
            "Value":"Al mare",
            "Id":111
         },
         {  
            "Name":"Localita",
            "Value":"In montagna",
            "Id":112
         }
      ]
   },
   {  
      "Id":3,
      "Name":"Num Notti",
      "Values":[  
         {  
            "Name":"Num Notti",
            "Value":"1",
            "Id":11076
         },
         {  
            "Name":"Num Notti",
            "Value":"2",
            "Id":11077
         }
      ]
   },
   {  
      "Id":4,
      "Name":"Tipo Soggiorno",
      "Values":[  
         {  
            "Name":"Tipo Soggiorno",
            "Value":"1 stella",
            "Id":1100
         },
         {  
            "Name":"Tipo Soggiorno",
            "Value":"2 stelle",
            "Id":1101
         }
      ]
   }
]

HTML

<div ng-controller="ricercaAttivita">
    <div ng-repeat="masterAttribute in masterAttributes">
        <select ng-model="selected-attr" ng-options="attr.Id as attr.Value for attr in masterAttribute.Values">
        </select>
    </div>
</div>

CONTROLLER

tantoSvagoApp.controller("ricercaAttivita", function ($scope, $http, serviceRicercaAttivita) {

    var parametersMaster = {"Id": master};
    serviceRicercaAttivita.getMasterAttributes(parametersMaster, 
    successCallBackMasterAttributes);

    function successCallBackMasterAttributes(result) {
            $scope.masterAttributes = result;
    }
});

修改

我尝试做一个简单的事情,我在div中创建了一个带有静态选项的选项,当然它运行正常:

<div>
  <select>
    <option value="">TUTTE</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

如果我将ng-repeat指令放在select中不起作用,则意味着我无法打开下拉列表然后选择该选项。

<div ng-repeat="masterAttribute in masterAttributes">
  <select>
    <option value="">TUTTE</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

1 个答案:

答案 0 :(得分:0)

问题陈述似乎含糊不清。

ng-model可以是JSON中的新属性,用于保存id中选定的select

var app = angular.module("MyApp", []);
app.controller("ricercaAttivita", function($scope) {
  $scope.masterAttributes = [{
      "Id": 1,
      "Name": "Tipo Fuga",
      "Values": [{
          "Name": "Tipo Fuga",
          "Value": "Week End in Famiglia",
          "Id": 10555
        },
        {
          "Name": "Tipo Fuga",
          "Value": "Fuga romantica",
          "Id": 10560
        }
      ]
    },
    {
      "Id": 2,
      "Name": "Localita",
      "Values": [{
          "Name": "Localita",
          "Value": "Al mare",
          "Id": 111
        },
        {
          "Name": "Localita",
          "Value": "In montagna",
          "Id": 112
        }
      ]
    },
    {
      "Id": 3,
      "Name": "Num Notti",
      "Values": [{
          "Name": "Num Notti",
          "Value": "1",
          "Id": 11076
        },
        {
          "Name": "Num Notti",
          "Value": "2",
          "Id": 11077
        }
      ]
    },
    {
      "Id": 4,
      "Name": "Tipo Soggiorno",
      "Values": [{
          "Name": "Tipo Soggiorno",
          "Value": "1 stella",
          "Id": 1100
        },
        {
          "Name": "Tipo Soggiorno",
          "Value": "2 stelle",
          "Id": 1101
        }
      ]
    }
  ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="MyApp" ng-controller="ricercaAttivita">
  <div ng-repeat="masterAttribute in masterAttributes">
    <select ng-model="masterAttribute.Selected" ng-options="attr.Id as attr.Value for attr in masterAttribute.Values">
        </select>
  </div>
  <pre>{{masterAttributes | json}}</pre>

</body>