Dynamic Angular and Ionic checkbox list

Question

I have my app in Ionic and Angular. I have a list with checkbox items that come from an array. What I want is when the user clicks on a checkbox item, they are added to a separate list i.e my choices.

the code is: App.js

$scope.myList = [
{name:'Choice one'},
{name:'Choice two)'}
];

HTML VIEW:

  <div>
  <ul class="list">
    <li class="item item-checkbox" ng-repeat='item in myList | filter: search'>
  <label class="checkbox">
   <input type="checkbox" ng-model="option.myList[$index]">
  </label>
       <p ng-bind-html="item.name"></p>

    </li>
    <ul>
</div>

So I want the choices once clicked to be added to a list above which is similar code to the html above. Any ideas?

as far as i understand? you want to attach checkbox value (checked or not) to each object in myList ? — Mudasser Ajaz
– Mudasser Ajaz, Commented Sep 8, 2015 at 11:28
Yes but if u imagine the list of choices is seperate and once they click on a choice it is added to another list in a div above saying my Choices — Sole
– Sole, Commented Sep 8, 2015 at 11:30

Abdullah AbuSall · Accepted Answer · 2015-09-08 10:49:45Z

0

maybe something like this:

$scope.myList = [
                    {name:'Choice one'},
                    {name:'Choice two)'}
                ];

$scope.myChoices = [];

$scope.stateChanged = function(checked){
    if(checked){
        $scope.myChoices.push(checked);
    }else{
        var index = $scope.myChoices.indexOf(checked);
        $scope.myChoices.splice(index,1);
    }
}

html:

<div>
    <ul class="list">
        <li class="item item-checkbox" ng-repeat='item in myList | filter: search'>
            <label class="checkbox">
                <input type="checkbox" ng-model="option.myList[$index]" ng-change='stateChanged(option.myList[$index])'>
            </label>
            <p ng-bind-html="item.name"></p>
        </li>
        <ul>
</div>

answered Sep 8, 2015 at 10:49

Abdullah AbuSall

194 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sole Over a year ago

Hi Abduallah, what if I want it in a seperate div above this list?

Sole Over a year ago

Hi Abduallah, but for some reason the code above does not keep the ng-model="option.myList[$index]". (LocalStorage);

Mudasser Ajaz · Accepted Answer · 2015-09-08 11:51:49Z

0

See this demo with your code : http://play.ionic.io/app/89d16b54285b

You do not need to make a seperate list to show selected options somewhere else. Just attach selected property with each object this way <input type="checkbox" ng-model="item.selected">

<ul class="list">
    <li class="item item-checkbox" ng-repeat='item in myList | filter: search'>
    <label class="checkbox">
    <input type="checkbox" ng-model="item.selected">
    </label>
       <p ng-bind-html="item.name"></p>
    </li>
<ul>

Now you can use same myList anywhere to see which is selected using filter

<div class="item" ng-repeat="item in myList | filter:{selected:true}">
  {{item.name}}
</div>

answered Sep 8, 2015 at 11:51

Mudasser Ajaz

6,2571 gold badge28 silver badges29 bronze badges

7 Comments

Sole Over a year ago

With the code above there is nothing for local storage? which I use with ng-model="option.myList[$index]". How would this be implemented also

Mudasser Ajaz Over a year ago

Have you seen demo which i mentioned in my answer? and what do you mean by local storage?

Sole Over a year ago

I am using ng-model="option.myList[$index]" for localStorage how do i use this with your code?

Mudasser Ajaz Over a year ago

as i told myList has both information now. Your datastructure will be [{name: 'choice1', selected: false},{name: 'choice2', selected: false}], now those object which are selected will have selected:true value. You can use myList also to store in localstorage. Point is you do not need to use extra array to store selected options.

Sole Over a year ago

Its working but can you show how you mean with the local storage?

|

Collectives™ on Stack Overflow

Dynamic Angular and Ionic checkbox list

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related