javascript - angularjs ng-false-value set to nothing - Stack Overflow

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?

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?

• javascript
• angularjs

Share Improve this question Follow edited Feb 26, 2015 at 8:22 Paul Stanley asked Feb 25, 2015 at 17:29 Paul StanleyPaul Stanley 4,09866 gold badges3838 silver badges5656 bronze badges 3

• 1 The object is initially empty - which object? You don't need '{{. – a better oliver Commented Feb 25, 2015 at 17:40
• what is ng-true-value and ng-false-value? You should just be using ng-model – Ronnie Commented Feb 25, 2015 at 20:35
• When I say object is initally empty, I meant ng-model, issueForView.metaData[subIndex].fieldValue[key], I'll update the question. – Paul Stanley Commented Feb 26, 2015 at 8:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

EDIT 2 - Revised answer based on ments:

From ments, 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 es from option.optionKey, and "Supplier" es 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="{}">    

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>