Question

以下是获取所有活动的代码。

var request = $http({
    method: "post",
    url: SITE_URL + '/api/getallevents',            
}).then(function(response){ 
    angular.forEach(response.data, function(item) {
        $scope.events = item;                
    });                       
});

输出是：

{"data":[
        {"event_id":"2","name":"I have a new message"},
        {"event_id":"3","name":"A meeting awaits me"},
        {"event_id":"4","name":"Someone visited my profil"},
        {"event_id":"5","name":"Someone like my profile"},
        {"event_id":"6","name":"My picture was approved"},
        {"event_id":"7","name":"My picture was rejected"},
        {"event_id":"8","name":"VIP purchase confirmation"}
    ]}

这是用于登录用户的活动

var request = $http({
    method: "post",
    url: SITE_URL + '/api/getuserevents',
    data: {  
        id:$window.sessionStorage.userid,                                   
    },
}).then(function(response){ 
    angular.forEach(response.data, function(item) {
        $scope.events.Selected = item;           
    }); 
});

输出是：

{"data":[
    {"event_id":"2","name":"I have a new message"},
    {"event_id":"3","name":"A meeting awaits me"}
]}

查看文件是：

<label ng-repeat="event in events">
    <input type="checkbox" value="{{event.event_id}}" ng-model="event.Selected" checklist-model="user.events" checklist-value="event" ng-checked="event.Selected"> {{event.name}}
</label>

现在我希望在所有复选框中选中所选数据。怎么可能。

Answer 1

你不应该对我的网络服务器进行2次调用，先提取整个事件列表，然后提取单个用户的事件。

您应该编辑服务器方法以提取如下所示的列表：

{"data":[
    {"event_id":"2","name":"I have a new message", "selected": "true"},
    {"event_id":"3","name":"A meeting awaits me", "selected": "true"},
    {"event_id":"4","name":"Someone visited my profil", "selected": "false"},
    {"event_id":"5","name":"Someone like my profile", "selected": "false"},
    {"event_id":"6","name":"My picture was approved", "selected": "false"},
    {"event_id":"7","name":"My picture was rejected", "selected": "false"},
    {"event_id":"8","name":"VIP purchase confirmation", "selected": "false"}
]}

然后您将能够按如下方式呈现您的列表：

<label ng-repeat="event in events">
    <input type="checkbox" value="{{event.event_id}}" ng-model="event.Selected" checklist-model="user.events" checklist-value="event" ng-checked="event.selected"> {{event.name}}
</label>

Answer 2

需要使用下面的代码。

<label ng-repeat="event in events">
        <input type="checkbox" checklist-model="user.events" checklist-value="event"> {{event.name}}
    </label>

其中

user.events = [
    {"event_id":"2","name":"I have a new message"},
    {"event_id":"3","name":"A meeting awaits me"}]`

和

events = [
    {"event_id":"2","name":"I have a new message"},
    {"event_id":"3","name":"A meeting awaits me"},
    {"event_id":"4","name":"Someone visited my profil"},
    {"event_id":"5","name":"Someone like my profile"},
    {"event_id":"6","name":"My picture was approved"},
    {"event_id":"7","name":"My picture was rejected"},
    {"event_id":"8","name":"VIP purchase confirmation"}
]

无论您要检查哪种选定数据，请将其保留在清单模型中。将其保留在清单模型中将自动检查，不需要使用ng-model或ng-checked。

此外，您无需使用value = "{{event.event_id}}"，因为您可以从checklist-model获取该数据。

如何在angularjs中动态选中复选框

2 个答案: