Question

我在$ 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>

数组索引与RoomNumber属性不同。

Answer 1

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

我删除了拖放内容，但这是我如何让它工作的。请注意，您不需要在select中使用ngChange指令，因为这样它就可以绑定到房间模型Type属性。因此，当您更改它们时，它们会保持同步。

以下是工作代码的小提琴，或者只是看下面的内容：http://jsfiddle.net/854wk/7/

<强>控制器：

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>

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

1 个答案: