Ignore falsey values when binding an array to an object property in AngularJS

Question

I am using Angular 1.4.8 and would like to put only the checked values of a list into an array. This array then needs to be the value of an object property, like this:

myObject = {
  "myArray": [
    "apple",
    "orange",
    "pear"
  ]
}

My HTML:

<div ng-app="myApp">
  <div ng-controller="MainCtrl as vm">
    <form name="myForm">
      <ul>
        <li ng-repeat="fruit in vm.fruits track by $index">
           <label>
              <input type="checkbox" ng-model="vm.myObject.myArray[$index]" ng-true-value="'{{fruit}}'" ng-false-value="undefined" />{{fruit}}
           </label>
         </li>
      </ul>
    </form>
    <pre>myObject = {{vm.myObject | json}}</pre>
  </div>
</div>

My JS:

angular.module('myApp', []);

angular.module('myApp').controller('MainCtrl', function() {
  var vm = this;
  vm.myObject = {
    myArray: []
  }
  vm.fruits = ["apple", "orange", "pear", "naartjie"];
});

For easy reference, see this fiddle.

Note that when you check and then uncheck a list item, the array retains a value of null. I do not want null bound to the array because it adds to its length and this is causing issues with other code.

How can I ignore binding falsey values like null, undefined, etc...?

Based on the way you have your bindings, you are explicitly setting the values of specific indexes with the true/false value bindings. You would either need to adjust the behavior of your html to execute some JS to perform the upkeep of myArray, or adjust your other code to accomodate the null values to get the functionality you want. — KreepN
– KreepN, Commented Dec 15, 2016 at 18:29

KreepN · Accepted Answer · 2016-12-15 18:48:47Z

1

Based on your requirements I have implemented something along the lines of what you may want:

vm.boxChecked = function(item){

   var index = vm.myObject.myArray.indexOf(item);    
   if(index !== -1)
       vm.myObject.myArray.splice(index, 1);
   else
    vm.myObject.myArray.push(item);
};

The fiddle also will check any checkbox whose value appears in the myArray on load. You will see it auto checks 'apple' for you as I have put it in the array. IF you wish to remove this functionality, simply remove apple from the array and the ng-checked portion of the directive and the behavior should be as you desire.

answered Dec 15, 2016 at 18:48

KreepN

8,5981 gold badge43 silver badges58 bronze badges

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

2 Comments

samurai_jane Over a year ago

I removed this as the best answer because after looking at it more closely, you removed ng-model from my fiddle but I need ng-model in my solution. According to the angular docs, ng-model cannot be used with ng-checked. If you know of a workaround, please post.

KreepN Over a year ago

Unfortunately your data structure doesn't support all your requirements. You will have to make some changes to your objects if you wish to use ng-model. If you are tracking by $index in your post: ng-model="vm.myObject.myArray[$index]" you are bound to set an element at some point that is in the in the middle of your fruit collection. If you set $index = 2 for example, there has to be something occupying $index[0-1]. Since I can't see the code that is affected by adding null values to the array, it is hard to fix my answer.

RayfenWindspear · Accepted Answer · 2016-12-15 18:54:50Z

1

You can create a function to add/remove the fruits from array.

Something like this:

vm.insertIntoArray = function(value){
    var index = vm.fruitsArray.indexOf(value);
    if(index === -1){
        vm.fruitsArray.push(value);
    }else{
        vm.fruitsArray.splice(index,1);
    }
}

Also, set ng-change attribute into your checkboxes.

<input type="checkbox" ng-model="vm.myObject.myArray[$index]" ng-change="vm.insertIntoArray(fruit)" ng-value="'{{fruit}}'"/>

Here's a working fiddle: https://jsfiddle.net/fwu045u0/

edited Dec 15, 2016 at 18:54

RayfenWindspear

6,3241 gold badge34 silver badges44 bronze badges

answered Dec 15, 2016 at 18:39

TheNameless

211 silver badge8 bronze badges

3 Comments

RayfenWindspear Over a year ago

This solution works with a minor tweak. You put the value into splice instead of the index. This fiddle based on yours works. jsfiddle.net/fwu045u0

TheNameless Over a year ago

Yeah, sure. I was useing the value instead of the index by mistake. Thanks @RayfenWindspear.

samurai_jane Over a year ago

Victor Hugo, great solution. It's just slightly different that what I was looking for (your code pushes to an array but I need that array to be the property of an object). Nonetheless, thank you very much. Seeing how you approach this problem is extremely helpful. @RayfenWindspear, thank you for the edit, I appreciate it.

T.Gounelle · Accepted Answer · 2016-12-15 18:41:46Z

Look at this plunker for the same problem.

You can modify your model to track the selected items by adding some selected property to the original objects, e.g.

<li ng-repeat="fruit in vm.fruits track by $index">
   <label>
      <input type="checkbox" ng-model="fruit.selected" ng-true-value="'{{fruit}}'" ng-false-value="undefined" />{{fruit}}
   </label>
</li>

Then you have several solutions to build the array of selected elements:

with a function that filter the fruit array on selected==true property
with a watch on the fruits collection that will update the selected array when an item is selected/unselected.
by adding `ng-change="toggleSelect(fruit)" in the input and managing a separate list of selected items

samurai_jane · Accepted Answer · 2016-12-19 08:18:26Z

The problem comes down to tracking by $index. Removing $index from this code:

    <li ng-repeat="fruit in vm.fruits track by $index">
       <label>
          <input type="checkbox" ng-model="vm.myObject.myArray[$index]" ng-true-value="'{{fruit}}'" ng-false-value="undefined" />{{fruit}}
       </label>
     </li>

and replacing it with (key, value) like this:

    <li ng-repeat="(key, value) in vm.fruits track by value">
       <label>
          <input type="checkbox" ng-model="vm.myObject.myArray.value[key]" ng-change="vm.insertIntoArray(value)" ng-true-value="'{{value}}'" />{{value}}
       </label>
     </li>

solved my issue.

Although other answers to-date were helpful and contributed to the final solution, none included everything that I needed. See the updated fiddle for more details.

Collectives™ on Stack Overflow

Ignore falsey values when binding an array to an object property in AngularJS

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related