Develop Reference

Auto-Populated fields in a dynamic model not submitting

I need help on populating an object with the value of a text input field in a dynamic created form. In my controller i declared $scope.models={}. The last input field in the form below which has a default value g.quant1 is populated by a value from the server but after submitting the form, the value is not passed. Viewing the object this way {{models | json}}shows empty, it only submits the last input value if the value is entered only then does models get populated with the value
<div class="list" ng-repeat="g in dcs | filter:{age:'26'}">
<div class="item item-input item-stacked-label">
{{g.zidname}} </br>L: <input type="text" id="lll{{$index}}" ng-model="models['l' + $index]" name="lf{{u.gidname}}"><p>{{$index}}</p>
</br>B: <input type="text" id="bbb{{$index}}" ng-model="models['b' + $index]" name="bf{{y.gidname}}">
<!--<p>data.b{{$index}}</p>-->
</br>D: <input type="text" id="ddd{{$index}}" ng-model="models['d' + $index]" name="df{{d.gidname}}">
<!--<p>data.d{{$index}}</p>-->
</br>NUM: <input type="text" id="nummm{{$index}}" ng-model="models['num' + $index]" name="numf{{y.gidname}}">
</br>Certified Rate: <input type="text" id="crrr{{$index}}" ng-model="models['cr' + $index]" name="cre{{y.gidname}}">
<input type="text" ng-model="models['quan' + $index]" ng-value="g.quant1" >
</div>
</div>
my controller
$scope.insert50=function(){
var link = 'http://...';
$http.post(link, {user: $scope.models
}).success(function(data){
alert(data);
});
}

I had a workaround with all your problems and created a separate plunker for the solution. I am not sure what you are doing with name. For validations of each field, you need to set unique name for it and you need to add required or ng-required attribute based on your requirement. In plunker, I included validation for the last field which you can refer. Can you check this and let me know whether everything is working fine as you expected?

Comparing Two Arrays with ng-repeat

I am trying create multiple checkboxes using ng-repeat from Array1, and I'd like apply the "checked" attribute (using ng-checked) to certain ones depending if there is a match in Array2.
Here we have array1 in the controller:
$scope.possibleConditions = ["condition1", "condition2", "condition3", "condition4"];
and then array2 is from the same controller but via JSON API.
{
"treated" : false,
"data" : [{
"conditions" : ["condition1", "condition2"],
}]
}
This is my current ng-repeat set up in the template:
<p ng-repeat="condition in possibleConditions">
<input type="checkbox" id="{{condition}}" />
<label for="{{condition}}">
{{condition}}
</label>
</p>
The desire is to apply the attribute checked to the input if, say, "condition1" in Array1 is found in "conditions" from Array2.
What I've tried:
1: I've tried using a filter (which I found on stackoverflow) after my controller:
.filter('customArray', function($filter){
return function(list, arrayFilter, element){
if(arrayFilter){
return $filter("filter")(list, function(listItem){
return arrayFilter.indexOf(listItem[element]) != -1;
});
}
};
with the ng-repeat amended slightly:
<p ng-repeat="conditions in possibleConditions | customArray:profileData.data:'conditions' ">
But that didn't work.
2: I've tried using another ng-repeat within the ng-repeat, then check it against the first one fir a match.
Example:
<p ng-repeat="conditions in possibleConditions">
<input ng-repeat="condition in profileData.data[0].conditions | filter{condition == conditions}" type="checkbox" id="{{condition}}" />
<label ng-repeat="condition in profileData.data[0].conditions | filter{condition == conditions}" for="{{condition}}">
{{condition}}
</label>
</p>
Hopefully somebody can help / point some guidance.
Thank You.

You don't really need a filter here, simple ngChecked directive could work:
<p ng-repeat="condition in possibleConditions">
<input type="checkbox" id="{{condition}}"
ng-checked="response.data[0].conditions.indexOf(condition) > -1" />
<label for="{{condition}}">
{{condition}}
</label>
</p>
Demo: http://plnkr.co/edit/fDn0niCCljo5wChzYiwa?p=info
where response is your data from API.

How to check all checkboxs with angular

I have a checkbox that should check all checkboxes. The checkbox works as it should by checking all the checkbox's, however angular doesnt think they have been checked? The only way angular knows if they are checked is if i manually check each one. (The brackets and for loop are blade php from laravel)
<label class="checkbox-inline">
<input type="checkbox" ng-model="everyoneCheck"/> Everyone
</label>
#foreach($company->users as $tagIndex => $user)
<label class="checkbox-inline">
<input type="checkbox" ng-checked="everyoneCheck" ng-model="newDiscussion.notify_partners[{{$tagIndex}}]" ng-true-value="{{$user->id}}" /> {{ $user->first_name }} {{ $user->last_name }}
</label>
#endforeach
upon click of the submit button i proceed to $http.post to my server, i just pass in an object to the post function, this is the object.
var discussionData = {
'title': $scope.newDiscussion.title,
'discussion': $scope.newDiscussion.summary,
'company_id': company_id,
'notify_partners': $scope.newDiscussion.notify_partners
};
for some reason when i use the check all approach, nothing gets put into notify_partners, however when i manually click each checkbox, they will get entered and submitted properly.
Any help? I feel like its some sort of binding issue, where i just need to tell angular, hey its updated!

Here's a way to do it:
<p><input type="checkbox" ng-model="globalCheck" ng-click="toggleCheckAll()" /> Check All</p>
<ul>
<li ng-repeat="i in init">
<input type="checkbox" ng-model="checkbox[$index]" /> Checkbox {{ $index + 1 }} {{ checkbox[$index] }}
</li>
</ul>
Then in your controller:
function myControl($scope) {
$scope.globalCheck = false;
$scope.checkbox = {};
$scope.init = [0,1,2,3,4,5,6,7,8,9];
$scope.toggleCheckAll = function() {
var k, val = !$scope.globalCheck;
console.log(val);
for(k in $scope.init) {
$scope.checkbox[k] = val;
}
}
}
See JSfiddle for working example

ng-checked does not update the value bound in ng-model. It only affects the presence of the checked attribute on the element itself.
Your best bet is to use ng-change to execute some function and update all your models accordingly.
<input type="checkbox"
ng-model="everyoneCheck"
ng-change="toggleCheckAll()"/>
And in your controller, you can have toggleCheckAll() loop over your models and set them based on the value of everyoneCheck

Angular JS show input when radio checked

I have a javascript array like so:
$scope.quantityMachines = [
{ 'snippet' : 'One' },
{ 'snippet' : 'Two' },
{ 'snippet' : 'Three or more',
'extraField' : true },
{ 'snippet' : 'Not sure, need advice' }
];
Then I have a list of radio buttons generated by Angular JS using the array:
<ul>
<li ng-repeat="quantity in quantityMachines">
<input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" />
<label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
</li>
</ul>
This works. In the array there is an extraField with value true in one of the indexes. I need Angular to show an extra input field when a radio button with the extraField setting is checked. The array may change to have more than one index with the extraField value.
So the extra field would look something like this.
<input type="text" ng-model="extraInfo" ng-show="howMany" />
Other than knowing to use ng-show, I'm not sure what would be the correct way to do this. The above example of course does nothing.

You could use ng-if and ng-show combination and a scope variable to keep track what is selected. ng-if will make sure the textbox is not added unwantedly to the DOM and ng-show to show and hide as the radio gets toggled.
In your input:-
<input type="text" ng-model="extraInfo" ng-if="quantity.extraField" ng-show="option.selected === howMany" />
and in your Radio add ng-click="option.selected=quantity.snippet"
<ul>
<li ng-repeat="quantity in quantityMachines">
<input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" ng-click="option.selected=quantity.snippet"/>
<label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
<input type="text" ng-model="extraInfo" ng-if="quantity.extraField" ng-show="option.selected === howMany" />
</li>
</ul>
and add in your controller:-
$scope.option = { selected:'none'};
Bin
You could even use howMany to track what was selected except that you need to set it as a property to an object on the scope (Since ng-repeat creates its own child scope and proto inheritance comes to play).
So in your radio just add ng-model="option.howMany", in your controller add $scope.option = { }; and in the text box ng-if="quantity.extraField" ng-show="quantity.snippet === option.howMany"
Bin

If only you had a plunker...without that try this
<ul>
<li ng-repeat="quantity in quantityMachines">
<input type="radio" id="quantityMachines{{$index}}" name="quantityMachines"
value="{{quantity.snippet}}" ng-model="howMany" />
<label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
<input type="text" ng-model="extraInfo" **ng-if="quantity.extraField"** />
</li>
</ul>

http://jsbin.com/biwah/1/edit?html,js,output
<ul>
<li ng-repeat="quantity in quantityMachines">
<input type="radio" id="quantityMachines{{$index}}" name="quantityMachines" value="{{quantity.snippet}}" ng-model="howMany" />
<label for="quantityMachines{{$index}}">{{quantity.snippet}}</label>
<input type="text" ng-model="quantity.extraInfo" ng-show="quantity.extraField" />
</li>
</ul>

The easiest way to show something when radio button is checked is the following:
Lets say you have a radio-group with: ng-model="radio-values"
To show or hide your input then depends on the values within the radio-group: value="radio-value1", value="radio-value2"
To finally show or hide the input field (lets say you want to show something if "radio-value1" is set) you do:
<input ng-show="radio-values == 'radio-value1'" ...>

Can you get this ng-model value from ng-click?

I have several checkboxes in angular.js and I am trying to get the ng-model value from the selected checkbox when clicked. Any suggestions?
<div class="checkbox">
<label>
<input type="checkbox" ng-model="hyp" value="false" ng-click="selection($event)">
Hypertension
</label>
</div>
$scope.selection = function($event){
console.log($event.target.value);
}
I hope that this is clear enough :/

you can directly put your model inside your function : ng-click="selection(hyp)"

You can get the value directly from the model. So you can do this:
$scope.hyp = false; // You can remove the value attribute
$scope.selection = function() {
console.log($scope.hyp);
};