Question

这是我的第一个stackoverflow问题，因此一些帮助将受到高度赞赏。我正在开发一个角度应用程序，在一个ui部分，用户有机会进行多个不同的选择，可以重复。 e.g

列表中的设备列表。用户可以创建多个，甚至可以是所有相同的类型。

工作小提琴： http://jsfiddle.net/mrafaqi/dpLd85ep/5/

<table id="devices-table" class="table">
<tr ng-repeat="item in requiredDevices track by $index"  height="30">
    <td>
        <select 
            id="deviceList_{{$index}}"
            name="deviceList_name_{{$index}}"
            ng-model="item"
            ng-options="d.name for d in devices track by d.id"
            ng-change="deviceChanged($index, item)"
            >{{item}}
        </select>

        <div id="device-options" ng-show="item.id > -1">
            <label for="all_{{$index}}">1. Choose all</label><input     id="all_{{$index}}" type="radio" name="type_{{$index}}" value="1" ng-model="item.amountType" checked><br>
            <label for="some_{{$index}}">2. Choose some</label><input id="some_{{$index}}" type="radio" name="type_{{$index}}" value="2" ng-model="item.amountType" ><br>
            <label for="amount_{{$index}}">3. Choose amount</label><input id="amount_{{$index}}" type="radio" name="type_{{$index}}" value="3" ng-model="item.amountType" ><br>


      </div>
      <br>
  </td>
  </tr>

<tr id="add-device">
  <td>
  <br>
      <button id="add-device-button" ng-click="addDevice();">Add more</button>
      <button id="add-device-button" ng-click="showRequiredDevices();">Show required devices</button>
  </td>

  </tr>
</table>

此代码的相应javascript是

var new_test_controller = app.controller('new_test_controller', function($scope) {
$scope.init = function() {
    $scope.current_customer = $scope.customers[0].first_name;

    $scope.addDevice();
};

$scope.test1_text = "";

$scope.customers = 
                [
                 { "uid": 1, "first_name": "Rizwan", "last_name": "Zia" },
                 { "uid": 2, "first_name": "Laura", "last_name": "Zia" },
                 { "uid": 3, "first_name": "Sara", "last_name": "Zia" },
                ];

$scope.devices = [
                    {"id" : 1, "name": "scissors", "amount": 3, "amountType": -1},
                    {"id" : 2, "name": "jumppapallo", "amount": 3, "amountType": -1},
                    {"id" : 3, "name": "gymstick", "amount": 3, "amountType": -1},
                 ];

$scope.requiredDevices = [

                ];

$scope.addDevice = function() {
    var device = new Object();

    device.tid = $scope.requiredDevices.length;
    device.id = -1;
    device.name = "";
    device.amount = 0;
    device.amountType = -1;

    console.log(device);
    $scope.requiredDevices.push(device);
};

$scope.showRequiredDevices = function() {
    console.log($scope.requiredDevices);
};

$scope.deviceChanged = function($index, item) {
    console.log('Device changed at index: ' + $index);
    console.log(item);
    //$scope.requiredDevices[$index] = item;
};

//console.log('Controller must have been initialized');
$scope.init();
});

现在，问题在于我无法选择具有不同属性的相同设备。要生成此行为

点击两次或更多次添加更多按钮（至少创建2个设备）
在第一个和第二个组合框中选择gymstick
在第三个组合框中选择任何其他设备
现在，如果您尝试单击gymstick的单选按钮，它将更新其他项目的值，这也是我不想要的。这似乎是角度的一些行为。我试图使用$ index（t.id试图破解它）。任何帮助将不胜感激:)）

Answer 1

两个item变量

之间存在冲突

item

ng-repeat

item

select

您可以更改选择框模型

前：

<select 
id="deviceList_{{$index}}"
name="deviceList_name_{{$index}}"
ng-model="item1"                         
....
</select>

并将ng-show更改为

<div id="device-options" ng-show="item1.id > -1">

这是Demo Fiddle

ng-repeat内部ng-repeat（具有相似的查找对象）意外行为，奇怪的行为

1 个答案: