从AngularJS

时间:2016-09-23 15:29:44

标签: html angularjs arrays

我创建了一个包含一些文本框,单选按钮和复选框的页面。我正在使用此页面来保存新数据或编辑现有数据。我能够保存新数据但是为了编辑数据,页面应该显示从变量获得的一些预定义值。我能够从该变量中获取和设置文本框和单选按钮的值。但我无法检查复选框。我有很多复选框,所以我使用ng-repeat来显示页面上显示的值。我将所选复选框的值设置为一个数组,并将该值传递给我的服务层。

以下是我的代码段:

HTML:

<div id="activityCheckboxList" class="checkboxList">
    <div ng-repeat="activity in activities">
        <label>
                <input type="checkbox" ng-true-value="activity" ng-checked="selection.indexOf(activity) > -1" ng-click="toggleSelection(activity)"/>
                <span>{{activity.activityName}}</span>
            </label>
    </div>
</div>

app.js:

$scope.selection=[];
$scope.getActivities(); //this sets values in $scope.activities which is a     list coming from service layer

    //Get Selected Activities from Check Boxes
    $scope.toggleSelection = function toggleSelection(activity){
        var idx = $scope.selection.indexOf(activity);

        if(idx > -1){
            $scope.selection.splice(idx, 1);
        }
        else{
            $scope.selection.push(activity);
        }
    };

在此之后,在点击提交时,我正在传递$ scope.selection,它将包含我的活动对象。

为了编辑数据,我可以将数据放入选择[]。但是如何使用该复选框进行检查,之后应该取消选中/再次检查它们。我尝试使用foreach循环,但它没有帮助。

提前致谢

1 个答案:

答案 0 :(得分:0)

由于“activity”是一个对象,indexOf不是查找索引的正确方法。我对您的代码进行了一些更改

<强> HTML

                <input type="checkbox" ng-true-value="activity" 
       ng-checked="checkInSelectionList(activity)" ng-click="toggleSelection(activity)"/>
                <span>{{activity.activityName}}</span>

<强> JS

$scope.checkInSelectionList = function (item) {
for(var i=0; i<$scope.selection.length;i++){
    if($scope.selection[i]['ID'] == item['ID']){
    return true;
  }
}
}

您还可以使用underscore查找对象的索引。

https://jsfiddle.net/nors536b/