1

这是我的第一个 stackoverflow 问题，因此我们将不胜感激。我正在开发一个有角度的应用程序，在一个 ui 部分，用户有机会选择多个可以重复的不同选择。例如

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

工作小提琴：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();
});

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

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

1 回答 1

1

item两个变量之间存在冲突

  1. item在ng-repeat.
  2. itemselect盒子里的模型

您可以更改选择框模型

前任 ： 

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

并更改ng-show为

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

这是演示小提琴

于 2015-01-24T08:30:40.290 回答