0

我正在将 Spring MVC 代码段迁移到 AngularJS 中并遇到以下问题：在 Spring 中，有一个不错的标签，它将采用项目的集合（或映射）和属性路径来神奇地生成复选框列表并选择检查的；

<form:checkboxes path="selectedItems" items="${items}" />

其中selectedItems是值列表，项目是值和名称的映射。

是的，我可以使用以下代码显示所有复选框：

<span ng-repeat="(key, value) in items" >
    <input type="checkbox" ng-value="key" > <label class="label" >{{value}}</label>
</span>

但诀窍是我们如何根据 selectedItems 中的值自动选择复选框，然后在用户选择/取消选择其他项目时绑定它？

4

1 回答 1

2

指令赋予您的 html 标签更多的权力。我写了一个简单的指令，它将使用一个属性“项目”来生成一个复选框列表，并根据项目的状态检查选定的复选框。

HTML：在控制器中定义数据并添加标签 < checkboxes >

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>Angular test</title>
</head>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="js/app.js"></script>
    <div ng-controller="CheckboxesCtrl">
        <checkboxes items="items"></checkboxes>
        <button ng-click="changeData()">change data</button>
    </div>
</body>
</html>

App.js 定义控制器和指令

var app = angular.module('myApp',[]);

app.controller('CheckboxesCtrl',function($scope){
    //fake data
    $scope.items = [{label:"A",checked:true},{label:"B",checked:true},{label:"C",checked:false}];
    //data binding test
    $scope.changeData = function(){
        $scope.items[0].checked=false;
        $scope.items[0].label="changed A";
    } 
});

//checkboxes directive
app.directive('checkboxes',function(){
    return {
        restrict: "E",
        scope:{
            items: "="
        },
        template: '<div ng-repeat="item in items">'+
                  '<input type="checkbox" ng-value="{{item.label}}" ng-checked="item.checked" />'+
                  ' <lable class="label"> {{item.label}} </label>'+
                  '</div>'
    };
});

我使用 ng-checked 指令来处理复选框状态绑定。你可以试试我的测试JSFiddle。

希望这对你有帮助。

于 2013-08-28T03:11:49.373 回答