CODEWITHSUNDEEP
javascriptangularjs
Paul Stanley
Paul Stanley

Reputation: 4098

angularjs ng-false-value set to nothing

If I have a checkbox in angular like this:

<div ng-repeat="(key,option) in metaItem.fieldOptions">
    <input type="checkbox" 
           name="metaField[]"
           ng-model="issueForView.metaData[subIndex].fieldValue[key]"
           ng-true-value="'{{option.optionValue}}'" 
           ng-false-value="'{{null}}'">     
           {{option.optionPlaceholder}}
</div>

So ng-model, issueForView.metaData[subIndex].fieldValue[key] is initially empty, its like this:

{}

Say I click option of supplier, I get this:

{"0":"Supplier"}

Then, If I deselect, I get this:

{"0":""}

What I want upon deselect is this:

{}

This is to keep it inline with code I am replacing. Any suggestions?

Upvotes: 5

Views: 4981

Answers (2)

Blowsie
Blowsie

Reputation: 40535

Simply add the required tag. The key value will not appear in the form object unless it is valid.

<div ng-repeat="(key,option) in metaItem.fieldOptions">
    <input type="checkbox" 
           name="metaField[]"
           required=""
           ng-model="issueForView.metaData[subIndex].fieldValue[key]"
           ng-true-value="'{{option.optionValue}}'" 
           ng-false-value="'{{null}}'">     
           {{option.optionPlaceholder}}
</div>

Upvotes: 0

New Dev
New Dev

Reputation: 49590

EDIT 2 - Revised answer based on comments:

From comments, I understand that the object model you have is along the following lines:

metaItem.fieldOptions = 
  {0: {optionValue: "Supplier"}, 
   1: {optionValue: "SomethingA"}, 
   2: {optionValue: "SomethingB"}};

And you want the selected values to populate the fieldValue object. So, say, for selected keys 0 and 2, the following appears:

issueForView.metaData[subIndex].fieldValue = {0: "Supplier", 2: "SomethingB"};

and the problem is if you deselect 0, you get this:

issueForView.metaData[subIndex].fieldValue = {0: "", 2: "SomethingB"};

But you want this:

issueForView.metaData[subIndex].fieldValue = {2: "SomethingB"};

Answer: This is easily solved if you assigned undefined in ng-false-value:

<input type="checkbox" 
       ng-model="issueForView.metaData[subIndex].fieldValue[key]" 
       ng-true-value="'{{option.optionValue}}'" ng-false-value="undefined">

plunker

====

Original answer:

Simply put, you want the model set in ng-model to be "some string" if true, and empty object {} - if false, right?

Then, just set these as the ng-true-value and ng-false-value:

<input type="checkbox" 
       ng-model="foo" ng-true-value="'some string'" ng-false-value="{}">

To apply it directly to your example, 

<div ng-repeat="(key,option) in metaItem.fieldOptions">
    <input type="checkbox" 
           ng-model="issueForView.metaData[subIndex].fieldValue[key]"
           ng-true-value="'{{option.optionValue}}'" 
           ng-false-value="{}">     
           {{option.optionPlaceholder}}
</div>

EDIT:

If, instead of "some string", you want to set your model to an object, you could supply an object literal hardcoded inline:

<input type="checkbox" 
       ng-model="foo" ng-true-value="{0: 'Supplier'}" ng-false-value="{}">

In your example, where this object is set dynamically within ng-repeat's iteration, then it's better if you have that object literal prepared.

Say, you had option.optionValue === {0: "Supplier"} for this iteration (doesn't look like you do, but that would be the right approach, since the object is, in fact, an "option value"), then you could set it like so:

<input type="checkbox" 
       ng-model="issueForView.metaData[subIndex].fieldValue[key]" 
       ng-true-value="{{option.optionValue}}" ng-false-value="{}">

If you don't have it prepared and you need to construct it "on the fly", you could use ng-init for that. Say, the "0" in your example comes from option.optionKey, and "Supplier" comes from option.optionValue:

<input type="checkbox"
       ng-init="t = {}; t[option.optionKey] = option.optionValue"
       ng-model="issueForView.metaData[subIndex].fieldValue[key]" 
       ng-true-value="{{t}}" ng-false-value="{}">

Upvotes: 4

Related Questions