CODEWITHSUNDEEP
javascriptangularjs
Tiago
Tiago

Reputation: 4480

Angular: having a function as ng-false-value

In my Angular app, I have the following list of checkboxes, generated within a nested ng-repeat:

<div ng-repeat="partner in type.partners">
    <label class="checkbox-inline">
        <input type="checkbox"
        ng-model="partners[$parent.$index][$index]"
        ng-true-value="{{partner}}"
        ng-change="handleCheckboxChanged({{type.id}})"
        ng-checked="getChecked({{partner.id}})"
        >
        <p><span ></span>{{partner.name}}<p>
    </label>
</div>

This will end up looking like the picture below:

enter image description here

When a user selects a partner with a chekcbox, this partner gets added to the nested list of selected partners, making use of ng-true-value and ng-model.

However, when a user deselects a checkbox, my object will still keep that key:value pair, except the value will now simply be false, as seen here in the console:

enter image description here

My intention would be that this key:value pair would disappear when a user unticks a checkbox, instead of it just becoming false.

Is it possible to do so by triggering a function as the ng-false-value?

Upvotes: 0

Views: 416

Answers (1)

Artyom Pranovich
Artyom Pranovich

Reputation: 6962

What you described - this is a default behaviour. You can adjust your ngChange function.

Just a simple example, how you can make desired.

<div ng-repeat="partner in partners">
    <label>
        <input type="checkbox"
        value="partner.id"
        ng-model="partner.selected"
        ng-change="changeValue(partner)"
        />
        {{partner.name}}
    </label>
</div>

var partnersList = [], idsArray = [];

$scope.changeValue = function(partner){
   if(partner.selected)
      addPartner(partner);
   else
      removePartner(partner);
};

var addPartner= function(partner){
    if(!existInList(partner))
       partnersList.push(partner);
};

var removePartner= function(partner){
    idsArray = getIdsArray();
    var indexToRemove = idsArray.indexOf(partner.id);
    if(indexToRemove == -1)
       return;

    partnersList.splice(indexToRemove, 1);
};

var existInList = function(partner){
    idsArray = getIdsArray();
    return idsArray.indexOf(partner.id) != -1;
};

var getIdsArray = function(){
    return partnersList.map(function(partner){ return partner.id });
};

Link to JSFiddle example.

Upvotes: 1

Related Questions