Angelina Angelina - 1 month ago 5
AngularJS Question

Storing strings in array as user selects checkbox

I just started using

angularJS
and am trying to learn how to insert strings in array when user clicks checkbox and later access these values.

This is what I have so far:

<md-button class="toolbar-button" ng-click="removePlan()">
<md-icon>delete</md-icon>
</md-button>
<md-list-item ng-repeat="plan in plans">
<md-checkbox ng-model="plansSelected[plan._id]"> </md-checkbox>
</md-list-item>


apps.js

$scope.plansSelected = []
$scope.removePlan = function () {
for (var plan in $scope.plansSelected) {
if ($scope.plansSelected[plan] === true) {
projectResource.removePlan(plan).then(function (data) {
if (data.success) {
$scope.plans.push(data.plan)
}
})
}
}
}


projectResource.js

resource.removePlan = function (planId) {
return $http.delete(getPlanUrl(planId)).then(processResponse, processError)
}

function getPlansUrl () {
return getProjectUrl() + '/plans'
}

function getPlanUrl () {
return getPlansUrl() + '/' + $route.current.params.planId
}


In debugger this is how my array looks like:

$scope.plansSelected: Array[0]
57bd40128a58022800887d80:false
57bd40328a58022800887d88:false
57cc2bcbb452140500b0334a:false


I am checking if user removed selection from the checkbox and if the value is true then take that plan._id and pass in the loop to
removePlan
function.

Does anyone see what I am doing wrong, because this is not working.

Answer

Please be more specific what "this is not working" means - it's hard for us to detect that without being able to run it.

I can see that your use of $scope.plansSelected as an empty array is wrong. I would dispense with that and do it like this:

<md-list-item ng-repeat="plan in plans track by $index">
    {{plan.name}} <md-checkbox ng-model="plans[$index].selected"> </md-checkbox>
</md-list-item>

This basically adds a 'selected' attribute to your plans array, and make it easier for you to iterate over the plans array and pull out the ones you want.