Mapping objects in ng-value and ng-model (Angularjs) - javascript

An old code to display the radio boxes on angular side was written like this before:
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
value="{{item}}"
ng-change="saveRadio(x,y,z)"
ng-model="data[item.name]">
{{item.name}}
</label>
The problem was item is an object and the function saveRadio used to save the object in text format. We tried substituting the value with ng-value as below. Now preselection of saved answer is not happening. Code is shown below:
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
ng-value="item"
ng-change="saveRadio(x,y,z)"
ng-model="data[item.name]">
{{item.name}}
</label>
The scope variable data has the array of answers map.
Am I missing something here or is there something more to be added for Object comparison?

Figured this out, apparently ng-model and ng-value can store objects but doesn't do object comparison. Adding a ng-checked with the unique value will preselect the radiobox like so:
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
ng-value="item"
ng-checked="item.option == data[item].option)"
ng-change="saveRadio(x,y,z)"
ng-model="data[item.name]">
{{item.name}}
</label>

You can achieve the goal with this approach also:
$scope.items = [{id:1,name:"first"}];
$scope.savedAnswer = {id:1,name:"first"};
var index = $scope.items.map(function(obj, index) {
if(obj.name == $scope.savedAnswer.name) {
return index;
}
}).filter(isFinite);
$scope.preselectedAnswer = $scope.items[index];
View
<label ng-repeat="item in items" class="col-xs-3">
<input type="radio" name="{{item.name}}"
ng-value="item"
ng-change="saveRadio(x,y,z)"
ng-model="preselectedAnswer">
{{item.name}}
</label>
plunker : http://plnkr.co/edit/83atxi7JGtyBSlRqK2xo?p=preview

Related

dynamic form field with checkbox in angularjs

I want to submit values of the input field to controller with ng-submit but it shows undefined when i console input model.Each input values are saved with check box. But i want to check if any checkbox is unchecked or not.
Here is form html:
<form id="valueForm" ng-submit="submitValues()">
<div class="small-input list padding" style="padding-top:4px;">
<div ng-repeat="item in inputs track by $index">
<label class="item item-input">
<input type="text" placeholder="" ng-model="value" ng-disabled="ticked">
<ion-checkbox ng-click="addField($index)" ng-change="saveValue(ticked,value,$index)" ng-model="ticked"
ng-disabled="!value" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
</label>
</div>
</div>
<button type="submit" ng-show="showButton" class="button button-dark button-shadow pull-right" style="" ><i class="ion-ios-arrow-forward"></i></button>
</form>
Here is controller:
$scope.showButton = false;
$scope.inputs = [{value:''}];
var checkedValues =[];
$scope.addField = function (index) {
if($scope.inputs.length <= index+1 && $scope.inputs.length<10){
$scope.inputs.splice(index+1,0,name);
}
}
$scope.saveValue = function (ticked,item,index) {
if(ticked){
console.log('index'+index);
if(index>0) $scope.showButton =true;
checkedValues.splice(index,0,item);
console.log(checkedValues);
}else{
checkedValues.splice(index,1);
console.log(checkedValues);
}
}
$scope.submitValues = function(){
console.log($scope.value);
}
Because the inputs and checkboxes are inside an ng-repeat directive, the ng-model values need to be a property of the item iterator.
<form id="valueForm" ng-submit="submitValues()">
<div ng-repeat="item in inputs track by $index">
<!-- REMOVE
<input type="text" ng-model="value" ng-disabled="ticked">
<ion-checkbox ng-model="ticked"> </ion-checkbox>
-->
<!-- INSTEAD -->
<input type="text" ng-model="item.value"
ng-disabled="item.ticked">
<ion-checkbox ng-model="item.ticked"> </ion-checkbox>
</div>
<button type="submit" ng-show="showButton">
<i class="ion-ios-arrow-forward"></i>
</button>
</form>
The ng-repeat directive creates a child scope for each item. Using a value without a "dot" will put the value on each child scope. Hence the rule: "always use a 'dot' in your ng-models".
For more information, see AngularJS Wiki -- The Nuances of Prototypical Inheritance
UPDATE
To see the inputs on submit:
$scope.submitValues = function(){
//console.log($scope.value);
console.log($scope.inputs);
}

validation with angular checkbox-model

I'm using checklist-model in my angular/electron application and have following three checkboxes.
Both
USA
Canada
To start with, by default 'USA' is checked, however if the user clicks on 'Both' or 'Canada' , I need to check for a specific flag, and if the flag is false, I need to alert the user and avoid 'Both' or 'Canada' being clicked.
<div style="height:115px;background-color:#FBF9EC" class="form-control" >
<label ng-repeat="item in locations" style="width:80%">
<input type="checkbox" checklist-model="locationData.item" checklist-value="item" checklist-before-change="checkListvalidate(item)" ng-change="checkBoxClickFunc(item)" ng-click="locationClick()">
{{item}}
</label>
</div>
In the controller:
$scope.locationClick = function(){
if(!myFlag){
return false;
}
};
The spec for checklist-before-change says
An angular expression evaluated each time before the checklist-model has changed. If it evaluates to 'false' then the model will not change anymore.
What is it that I'm not doing correctly ....
You have many listeners in the checkedbox input :
checklist-before-change="checkListvalidate(item)"
ng-change="checkBoxClickFunc(item)"
ng-click="locationClick()"
I think these are too much to address your need and besides, it complicates the understand of the logic and it may create side-effects.
Why not use only checklist-before-change directive and make the call to locationClick() inside it ? I think it should be enough.
Here an example :
<body ng-controller="MainCtrl">
<div style="height:115px;background-color:#FBF9EC" class="form-control" >
<label ng-repeat="item in locations" style="width:80%">
<input type="checkbox" checklist-model="locationData.item"
checklist-value="item" checklist-before-change="checkListvalidate(item)" >
{{item}}
</label>
</div>
</body>

Angular-js - Populating Checkbox and track it based on JSON file

I have a nested Objects in JSON, and I need to populate the checkbox based on what comes in (dynamic) from JSON file, meaning, I wouldn't know in advance the name of the fields, or how many elements there could be. Here is a sample, but there could be more child and each child could have more or less item in it.
{
"Parent":{
"Child" :
{
"Child_01" : {
"description_01":false,
"description_02":false,
"description_03":false,
"description_04":false,
"description_05":false
},
"Child_02" :
{
"something_01":false,
"something_02":false,
"something_03":false,
"something_04": false
},
"Child_03" :
{
"things_01":false,
"things_02":false,
"things_03":false,
"things_04":false,
"things_05":false
}
}
}
}
Now, I need to populate a drop down from it, (child_01, child_02, child_03....) and when user choose one of them, I need to display checkboxes of all its properties. And of course be able to keep track of the chosen one.
Here is what I have.
$scope.children = response.data.parent.child;
$scope.childrenList = [];
angular.forEach($scope.children, function(value1, key1){
$scope.childrenList.push(key1);
});
and html:
<div ng-repeat="(key, data) in children">
<input ng-model="childrenListModel" type="checkbox" name="{{child}}" value="{{child}}">{{child}}</input>
</div>
Nothing works the way I intend to. Any help would be appreciated.
You probably need several nested ng-repeats. Have a look at this working plunker: http://plnkr.co/edit/K92JI7UlW9h6gh8SPeU5?p=preview
<div ng-repeat="child in children.Parent.Child">
<div ng-repeat="options in child">
<div ng-repeat="option in options">
<div ng-repeat="(key, val) in option">
<label for="{{key}}">
{{key}}
<input name="{{key}}" type="checkbox" ng-model="option[key]" />
</label>
</div>
</div>
<hr />
</div>
</div>

Angular checkboxes disapear on select

I have a list of checkboxes in my app:
<div class="col-md-6" ng-repeat="item in segment.items">
<div class="checkbox">
<label>
<input
type="checkbox"
ng-model="item"
ng-checked="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
{{item.name}} <code>/ {{item.slug}}</code>
</label>
</div>
</div>
The data, that exists on the $scope as segment.items, looks something like this:
[
{"id":1,"slug":"nl","name":"Dutch","enabled":true},
{"id":4,"slug":"en","name":"English","enabled":false},
{"id":2,"slug":"fr","name":"French","enabled":true},
{"id":3,"slug":"de","name":"German","enabled":false}
]
This renders fine on load, and the correct checboxes are checked. However, if I select a checkbox, the label disappears and the binding appears to be lost. If I deselect a checkbox, it seems to work fine, but if I select it again, it disappears as well. No errors show up in the console.
This is what it looks like on load:
And as soon as I click on "English" I get this
I'm new to Angular so I suspect I am doing something obvious wrong. Can anybody please point me in the right direction?
pointing your ng-model to ng-model="item" will cast your item into a boolean.
Also, you should not use ng-model with ng-checked : https://docs.angularjs.org/api/ng/directive/ngChecked
what you should do is the following :
<input
type="checkbox"
ng-model="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
You need to bind the ng-model directly on your enabled boolean attribute:
<input
type="checkbox"
ng-model="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.segment = {
items: [
{"id":1,"slug":"nl","name":"Dutch","enabled":true},
{"id":4,"slug":"en","name":"English","enabled":false},
{"id":2,"slug":"fr","name":"French","enabled":true},
{"id":3,"slug":"de","name":"German","enabled":false}
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
{{segment.items}}
<div class="col-md-6" ng-repeat="item in segment.items">
<div class="checkbox">
<label>
<input
type="checkbox"
ng-model="item.enabled"
value="{{item.id}}"
class="segment-visibility-checkbox"
/>
{{item.name}} <code>/ {{item.slug}}</code>
</label>
</div>
</div>
</div>

Angularjs input radio and ng-repeat issue

Okay so here is my setup i have the following array:
answers = [answer1, answer2]
with these i do the following:
<form>
<div class="col-xs-12" ng-repeat="answer in component.question.answers">
<div class="col-xs-1" style="width: 1%">
<div class="radio">
<label class="i-checks">
<input type="radio" name="a" ng-model="answer.is_correct">
<i></i>
</label>
</div>
</div>
<div class="col-xs-11">
<input type="text" ng-model="answer.answer" class="form-control" placeholder="Svar">
</div>
</div>
</form>
Now the input[radio] are inside the same form as they should. My goal is that when i set one as selected both of the answer objects should be updated so that only one of the object has the value is_correct = true
However what happens right now is that if i click the first and then second both values have is_correct = true
So what can i do?
Radio buttons are used to choose between different values for a single field or, in Angular's case, a single model. The logical solution would be to select the correct answer:
<input type="radio" ng-model="component.question.correctAnswer" ng-value="answer">
If you really need to set a flag you can easily achieve that with a watcher:
$scope.$watch('component.question.correctAnswer', function(correctAnswer) {
component.question.answers.forEach(function(answer) {
answer.is_correct = answer === correctAnswer ? true : false;
});
});

Categories