使用AngularJS绑定到数组中的特定对象

我的$scope中有一组房间，其结构如下：

$scope.model.rooms = [
    { RoomNumber: 1, Type: 'Single'}, 
    { RoomNumber: 3, Type: 'Single'}, 
    { RoomNumber: 5, Type: 'Double'}, 
    { RoomNumber: 6, Type: 'Single'}, 
    { RoomNumber: 12, Type: 'Double'}
];

然后，我在视图上创建了一个5x5网格，如下所示，并希望在下拉列表中选择正确的房间类型，但我不知道如何正确地进行绑定

<div data-ng-repeat="y in [1, 2, 3, 4, 5]" class="hotelRooms">
    <div data-ng-repeat="x in [1, 2, 3, 4, 5]">
        <h6>
            Room #{{(y-1)*5+x}}
            <select id="binType{{(y-1)*5+x}}" data-ng-model="model.rooms[/*WHAT DO I PUT HERE?*/].Type" data-ng-change="setRoomType((y-1)*5+x)">
                <option value="Single">Single</option>
                <option value="Double">Double</option>
            </select>
        </h6> 
        <div id="bin{{(y-1)*5+x}}" data-droppable="{{(y-1)*5+x}}" data-drop="addToRoom">
            <div id="{{p.Id}}" data-draggable="" data-ng-repeat="p in model.participants | filter:{RoomNumber:(y-1)*5+x}">{{p.Name}}</div>
        </div>
    </div>
</div>

会议室{{（y-1）*5+x}
单身
双重的
{{p.Name}}

---

数组索引与RoomNumber属性不同。

如果将所有行为都放入控制器，我会发现它更直观。您的视图仅绑定到这些行为（一个la MVVM）。通过这种方式，您可以更好地控制代码，而不受{{binding syntax}}及其限制的支配

我删除了拖放功能，但我是这样做的。请注意，在select中不需要ngChange指令，因为这样它就直接绑定到“房间模型类型”属性。所以当你改变它时，它们保持同步

这里有一个工作代码，或者只看下面：

控制器：

function MyController($scope) {
    $scope.calcBin = calcBin;
    $scope.getRoomByBin = getRoomByBin;

    function calcBin(row, col) { 
        return ((row - 1) * 5) + col;
    };

    function getRoomByBin(row, col) {
        var bin = calcBin(row, col);
        var foundRoom;
        $scope.model.rooms.some(function(room) {
            if (room.RoomNumber === bin)
            {
                foundRoom = room;
                return true; // break
            }
        });
        return foundRoom;
    }
}

<div ng-app>
    <div ng-controller="MyController">
        <div data-ng-repeat="y in [1, 2, 3, 4, 5]" 
             class="hotelRooms">
            <div data-ng-repeat="x in [1, 2, 3, 4, 5]">
                 <h6>
            Room #{{calcBin(y,x)}}
            <select id="binType{{calcBin(y,x)}}" 
                     data-ng-model="getRoomByBin(y,x).Type" >
                <option value="Single">Single</option>
                <option value="Double">Double</option>
            </select>
            Room Type is: {{getRoomByBin(y,x).Type}}
        </h6> 
        </div>
    </div>
</div>

查看：

function MyController($scope) {
    $scope.calcBin = calcBin;
    $scope.getRoomByBin = getRoomByBin;

    function calcBin(row, col) { 
        return ((row - 1) * 5) + col;
    };

    function getRoomByBin(row, col) {
        var bin = calcBin(row, col);
        var foundRoom;
        $scope.model.rooms.some(function(room) {
            if (room.RoomNumber === bin)
            {
                foundRoom = room;
                return true; // break
            }
        });
        return foundRoom;
    }
}

<div ng-app>
    <div ng-controller="MyController">
        <div data-ng-repeat="y in [1, 2, 3, 4, 5]" 
             class="hotelRooms">
            <div data-ng-repeat="x in [1, 2, 3, 4, 5]">
                 <h6>
            Room #{{calcBin(y,x)}}
            <select id="binType{{calcBin(y,x)}}" 
                     data-ng-model="getRoomByBin(y,x).Type" >
                <option value="Single">Single</option>
                <option value="Double">Double</option>
            </select>
            Room Type is: {{getRoomByBin(y,x).Type}}
        </h6> 
        </div>
    </div>
</div>

会议室{{calcBin（y，x）}
单身
双重的
房间类型为：{{getRoomByBin（y，x）.Type}

您是否试图用模型填充select？select的模型将是所选对象的任何对象。@J.Wells，select已具有选项Single和Double，该模型具有房间数组。当我绘制Room#1时，我想将下拉列表设置为rooms数组中的Type值，其中RoomNumber等于1。我没有使用

ngChange

绑定，但要在服务器上触发保存，我可能应该将其更改为

$watch

；因此，决策是在控制器中，而不是在视图中。我更喜欢

calcBin

和

getRoomByBin

方法，而不是我提出的解决方案，它是一个稀疏数组，房间位于相应的索引处。这很有意义。使用ngChange将更改持久化到服务器。有点健谈，但现在谁喜欢“保存”按钮呢？注意：通过删除findRoom（）方法，我稍微改变了我的解决方案。这很愚蠢。