Question

我一直在努力学习Angular但是遇到了一个小阻碍者。我的标记有一个DIV列表，点击后切换（一个新类）。这是一个静态的选项列表，我想避免使用ng-repeat指令。

<div ng-app="sampleApp" ng-controller="MainCtrl">
    <div class="item" id="germany">Germany</div>
    <div class="item" id="poland">Poland</div>
    <div class="item" id="sweden">Sweden</div>
    <div class="item" id="japan">Japan</div>
    <button type="button" ng-click="selected = []">Reset</button>
</div>

我想将它绑定到一系列选择。单击时，项目的id应添加到数组中，未选中时，应将其删除。选择数组中项目id的存在定义了它是否应该具有“活动”类。

下面我是如何在Angular中完成的，但这意味着我不能使用我的静态DIV列表，而是使用带有JSON的ng-repeat。我玩弄了这个并将它正确绑定到selected数组。单击该按钮可正确重置显示绑定有效的活动类。

我是否可以在不遵循JSON + ng-repeat方式的情况下完成此操作？一个指向我的例子会很好。谢谢

这是CSS：

.item {
    border-color: #ddd;
    background-color: #fff;
    color: #444;
    position: relative;
    z-index: 2;
    display: block;
    margin: -1px;
    padding: 16px;
    border-width: 1px;
    border-style: solid;
    font-size: 16px;
}

.item.active {
    border-color: #ccc;
    background-color: #d9d9d9;
}

这是JS：

var SampleApp;
(function (SampleApp) {

    var app = angular.module('sampleApp', []);
    app.controller('MainCtrl', function ($scope) {
        $scope.selected = [];

        $scope.clicked = function (member) {
            var index = $scope.selected.indexOf(member.name);
            if (index > -1) {
                $scope.selected.splice(index, 1);
                member.selected = false;
            } else {
                $scope.selected.push(member.name);
                member.selected = true;
            }
            console.log($scope.selected);
        }
        $scope.items = [{
            name: "item1"
        }, {
            name: "item2"
        }, {
            name: "item3"
        }, {
            name: "item4"
        }, {
            name: "item5"
        }];
    });

})(SampleApp || (SampleApp = {}));

这是标记：

<div ng-app="sampleApp" ng-controller="MainCtrl">
    <div class="item" ng-repeat="item in items" ng-click="clicked(item)" ng-class="{ active: selected.indexOf(item.name) !== -1 }" id="item.name">{{ item.name }}</div>
    <button type="button" ng-click="selected = []">Reset</button>
</div>

Answer 1

<div class="item" id="germany" 
     ng-click="toggle('germany')" 
     ng-class="{ active: selected.indexOf('germany') >= 0 }">Germany</div>

并为其他国家重复相同的模式。

在控制器中：

$scope.toggle = function(country) {
    var index = $scope.selected.indexOf(country);
    if (index >= 0) {
        $scope.selected.splice(index, 1);
    } else {
        $scope.selected.push(country);
    }
};

不确定为什么要避免使用ng-repeat。使用它可以避免在视图中一次又一次地重复相同的代码，从而降低引入错误的风险。

如何创建绑定元素列表作为没有ng-repeat的组？

1 个答案: