如何将 Spring <form:checkboxes> 转换为 AngularJS 等效项？答案

【问题标题】：How to convert Spring <form:checkboxes> to AngularJS equivalent?如何将 Spring <form:checkboxes> 转换为 AngularJS 等效项？
【发布时间】：2013-08-26 01:17:55
【问题描述】：

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

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

其中 selectedItems 是值列表，items 是值和名称映射。

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

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

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

【问题讨论】：

标签： spring angularjs checkbox

【解决方案1】：

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

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

<!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。

希望这对你有帮助。

【讨论】：