Question

我正在将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 中的值自动选择复选框，然后在用户选择/取消选择其他项时将其绑定？

Answer 1

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

HTML：在控制器中定义数据并添加标签＆lt;复选框＆gt;

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

希望这对你有所帮助。

如何将Spring <form：checkboxes>转换为等效的AngularJS？</form：checkboxes>

1 个答案: