1

これは私の初めてのスタックオーバーフローの質問なので、助けていただければ幸いです。私は角度のあるアプリケーションに取り組んでおり、1 つの 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 つのデバイスを作成します)。
  2. 1 番目と 2 番目のコンボ ボックスでジムスティックを選択します
  3. 3 番目のコンボ ボックスで他のデバイスを選択します
  4. ジムスティックのラジオボタンをクリックしようとすると、他のアイテムの値も更新されますが、これは望ましくありません。angularのいくつかの動作のようです。$index を使用しようとしました (t.id はハッキングしようとしていました)。どんな助けでも大歓迎です:)
4

1 に答える 1

1

2 つの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 に答える