Angularjs ng-false-value nothing set

Question

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] initially empty, its like this:

 {} 

Say that I click on the provider option, I get the following:

 {"0":"Supplier"} 

Then, if I deselected, I get the following:

 {"0":""} 

What I want to unselect:

 {} 

This is so that it is embedded with the code that I am replacing. Any suggestions?

Answer 1

EDIT 2 - Revised response based on comments:

From the comments, I understand that you have an object model:

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

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

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

and the problem is that if you deselect 0 , you will get the following:

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

But you want this:

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

Answer: This is easy to solve if you assigned undefined to 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 installed in ng-model to be "some string" if true and the empty object {} - if false , right?

Then just set them as 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 can specify the string code of the object:

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

In your example, where this object is set dynamically in the ng-repeat iteration, then it is better if you have this object literal.

Say you had option.optionValue === {0: "Supplier"} for this iteration (it doesn’t look like you, but that would be the right approach, since the object is essentially a "parameter value"), then you can install it like this:

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

If you don’t have it and you need to build it on the fly, you can use ng-init to do this. Say, "0" in your example comes from option.optionKey , and "Supplier" 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="{}"> 

Answer 2

Just add the required tag. The key value will not be displayed in the form if it is not 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>