ng-repeat 中的 ng-options（具有相似外观的对象）意外行为，奇怪的行为

Question

这是我的第一个 Whosebug 问题，因此非常感谢您的帮助。我正在开发一个 angular 应用程序，其中在一个 ui 部分，用户有机会选择多个不同的选择，这些选择可以重复。例如

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

工作fiddle： 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 的单选按钮，它也会更新我不想要的其他项目的值。这似乎是angular的一些行为。我尝试使用 $index（t.id 试图破解它）。任何帮助将不胜感激:)

Answer 1

两个item变量之间存在冲突

item 在 ng-repeat.
item 模型在 select 框

您可以更改 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-options（具有相似外观的对象）意外行为，奇怪的行为

ng-options inside ng-repeat (with similar looking object) unexpected behavior, weird behavior

angularjs

angularjs-ng-repeat

ng-repeat

angular-ngmodel

angularjs-ng-options