Dynamic list for Ionic App using Angular JS in two views

Question

I have a Ionic app with Angular JS. I have a Dynamic checkbox list which is called from an array in app.js. I have it so that when a user clicks on a checkbox, the list above gets updated with their choice, what I want is for the choice to get put into another view not another div i.e tab 1 = List, tab - 2 = choices. The code is:

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

  $scope.myChoices = [];


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

html:

<div>
  <div class="item item-dark item-icon-right">
   My Choices
  </div>

  <ul class="list" >
    <li class="item" ng-repeat='item in myChoices'>
       <p>{{item.name}}</p>

    </li>
    </ul>
    <div class="item item-dark item-icon-right">
     University list
    </div>
    <div class="item item-input-inset">
     <label class="item-input-wrapper">
       <i class="icon ion-ios-search placeholder-icon"></i>
       <input type="text" placeholder="Search" ng-model="search">
     </label>
     <button class="button ion-close-circled input-button button-small"
               ng-click="search = ''" ng-show="search.length">
               Clear search
             </button>

   </div>
  <ul class="list" >
    <li class="item item-checkbox" ng-repeat='item in myList | filter: search'>
  <label class="checkbox">
   <input type="checkbox" ng-model="checked" ng-change='stateChanged(checked,$index)'>
  </label>
      <p>{{item.name}}</p>

    </li>
    </ul>
</div>

Tabs:

<ion-tabs class="tabs-icon-top tabs-dark">

    <ion-tab title ="List" icon-on="home" icon-off="home"  href="#/tab/list">
    <ion-nav-view name="list-tab"></ion-nav-view></ion-tab>


    <ion-tab title ="My choices" icon-on="choices" icon-off="choices" href="#/tab/choice">
    <ion-nav-view name="choice-tab"></ion-nav-view></ion-tab>


</ion-tabs>

Alex J · Accepted Answer · 2015-09-13 00:30:44Z

1

When you are trying to send data across multiple views, the easiest way is to store the data in a factory variable. Whenever you need the data, you can get it from the factory with a simple get.

// This module can be in its own javascript file
angular.module('choicesFactory', [])
.factory('choicesFactory', function() {
    var choicesStored = [];
    return {
        storeChoices: function(choices) {
           choicesStored = choices;
           return;
        },
        getChoices: function() {
           return choicesStored;
        },
    };
});

Now, to implement this bit of code, all you have to do is include the javascript file after your inclusion of angularjs in your index.html and add choicesFactory to your app dependencies.

When you call the function from your controller, you can say:

.controller('choicesController', [
    '$scope',
    '$state',
    'choicesFactory'
    function($scope, $state, choicesFactory) {
        // An example with getting the choices
        var choices = choicesFactory.getChoices()
}]);

If this doesn't quite make sense, I made a codepen example app that demonstrates all the pieces working together.

Click here to check out the example. :) Happy coding

edited Sep 13, 2015 at 0:30

answered Sep 9, 2015 at 16:33

Alex J

3,1934 gold badges23 silver badges30 bronze badges

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

7 Comments

Sole Over a year ago

And where would this go Alex?

Sole Over a year ago

Hi Alex, ok but what would the HTML look like, to implement this code?

Sole Over a year ago

One thing is Alex, I noticed if I use the search and select say the result it will select the option that is originally presented in the list....

Alex J Over a year ago

Ok, I fixed it. You will notice that the issue had to do with tying the ng-model to a single checked variable. Everything should be in working order now.

Alex J Over a year ago

Also, that fix ended up causing another issue when I added a checked key to each of the names. I had to do some array filtering with a for loop to get something that I could search with indexOf. I hope NOW everything works.

|

Collectives™ on Stack Overflow

Dynamic list for Ionic App using Angular JS in two views

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related