I have a form with a few checkboxes and form is being processed via angularjs. I have no knowledge about angular however I read about it to find a solution to my problem. I want a checkbox to be checked automatically when form is load. When I look at the codes below I don't understand anything so I need your help.
HTML: (I think this dynamically generates a few < li > options in the form GUI)
<ul class="sublist" style="padding-top:{{ $index * 38}}px;" ng-init="index=$index" ng-if="forActive == k" ng-repeat="(k, v) in forData">
<li class="selected" ng-repeat="val in v">
{{ val }}
<input value="{{ k }} > {{ val }}" type="checkbox" class="flc" ng-click="addForValue(k + ' > ' + val)" />
</li>
</ul>
Content of array is this in angular: $scope.design.fors = [Adults > Men,Adults > Plus]
For example, When form is load, checkbox with value = Adults > Men shall be checked.
Thanks in advance
The way I usually handle this is by making my object a little more rich:
$scope.design.fors = [
{ value: "Adults > Men", checked: true},
{ value: "Adults > Plus", checked: false}]
Then in the view you can write something like:
<ul class="sublist">
<li class="selected" ng-repeat="item in design.fors">
<input type="checkbox" ng-model="item.checked" /> {{item.value}}
</li>
</ul>
Related
I try to display my selected checkboxes, which I render like this:
<pre>{{ JSON.stringify(selectedAttributes, null, 2) }}</pre>
<ul
class="list-unstyled"
v-for="category in categories"
:key="category.name"
>
<strong>{{ category.category_name }} </strong>
<li
v-for="attributes in category.attributes"
:key="attributes.attribute_id"
>
<Field
as="input"
name="attribute"
type="checkbox"
class="form-check-input"
v-model="selectedAttributes"
:id="attributes.attribute_id"
:value="attributes.attribute_id"
/>
<label class="form-check-label" for="attributes.attribute_id">
{{ attributes.attribute_name }}
</label>
</li>
</ul>
...
data() {
return {
selectedAttributes: [],
};
},
Unfortunately, the attribute_id of my selected checkboxes is not showing. Where is my mistake?
Update: The data from my api looks like this:
What I need here is, I want the user to check his preferred options and display the selected options in the JSON.stringify. The selectedAttributes should display the attribute_id of the chosen option.
Your data does not have attribute_id id property at all. Only attribute_name you can see at the image you provided
I have $scope.getmaindata list with 5 objects, in each object i have a list contain multiple values which user achieved. And $scope.myproviders contain levels with id and level name. I want to check the multiple values of each user corresponded to that service when id matches. and if user have level 3 in his list i have to show the input box next to it. I tried some answers in stackoverflow but none of them solved my issue.The problem i am getting with code is when the levelsqualified list of the each user is not in the order, so i thought i have to write a for loop and wrote but not succeeded.
Here is the working plunkr with more code Plunkr v1
Update
The values are binding for the first time with $scope variables but when i uncheck some of them levelsqualified list of each user is not updated
Plunkr v2
<div class="col-md-12 col-sm-12" ng-repeat="mydata in getmaindata">
<ul class="list-inline">
<h4>{{mydata.firstname}}</h4>
<li ng-repeat="providers in myproviders">
<span>
<label class="checkbox-inline">
<input type="checkbox" id="providercheck{{$index}}" name="amlcprovidercheck{{$index}}" ng-model="mydata.checkedList"
ng-checked="mydata.levelsqualified[$index]==providers.level">
{{providers.level}}
</label>
</span>
</li>
<li>
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if user have third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
</ul>
</div>
Extending on #Randi Radcliff's plunker, this plunker might do the trick.
On the ng-checked just did:
ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1"
I believe you need to change your ng-checked (if I am understanding you correctly).
<label class="checkbox-inline">
<input type="checkbox" id="providercheck{{$index}}" name="amlcprovidercheck{{$index}}" ng-model="mydata.checkedList"
ng-checked="mydata.levelsqualified[$index]">
{{providers.level}}
</label>
and you need to add an ng-if for your input box like so:
<li ng-if="mydata.levelsqualified[$index]==3">
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
I hope this is what you needed.
EDIT
I changed the Plunker to incorporate both answers and a little hacking. I added an ng-change event and changed your ng-model. See Below:
<li ng-repeat="providers in myproviders">
<span>
<label class="checkbox-inline">
<input type="checkbox" name="amlcprovidercheck{{$index}}" ng-model="mydata.selected" ng-change="addCheckChoice(mydata, providers)" ng-checked="mydata.levelsqualified.indexOf(providers.id) > -1">
{{providers.level}}
</label>
</span>
</li>
<li ng-if="mydata.levelsqualified.indexOf(3) > -1">
<div class="required-field-block">
<input type="text" class="form-control" placeholder="show if third level is checked" ng-model="maindata.other_provider" />
</div>
</li>
I also added the following function:
$scope.addCheckChoice = function (c, p) {
var main = $scope.getmaindata.indexOf(c);
var idx = c.levelsqualified.indexOf(p.id);
if (c.selected === true) {
c.levelsqualified.push(p.id);
alert("You selected " + p.id + " for " + c.firstname);
}
else {
c.levelsqualified.splice(idx, 1);
alert("You removed " + p.id + " for " + c.firstname)
}
for (var i = 0; i < c.levelsqualified.length; i++) {
for(var x = 0; x < $scope.myproviders.length; x++){
if (c.levelsqualified[i] == $scope.myproviders[x].id) {
c.selected = true;
}
}
}
}
If this isn't what you need, let me know. You may need to do a little tweaking.
I want to use ng-repeat object in ng-model value as sub string.. can i use this?? My scenario is:
<form id="booking_form" name="booking_form" ng-app="myApp" ng-submit="tasksubmit()">
<ul class="items-list">
<li ng-repeat="task in taskslist | filter:query | orderBy:orderProp" class="items-list-item">
<div class="items-list-item-image">
<p>
<input type="checkbox" ng-model="tasksubmit{{task.id}}" />
</p>
</div>
<div class="items-list-item-detail">
<p>
<strong>{{task.title}}</strong>
</p>
</div>
</li>
</ul>
</form>
in < input type = checkbox > i want to generate dynamic ng-model with prefix of tasksubmit (this is initialized in controller as $scope.tasksubmit = {} ). Any body please help me out in this problem.....
If I understand correctly you want all task.id as property inside your tasksubmit object as you have initialized it as object in your controller so you can do as below:
<input type="checkbox" ng-model="tasksubmit[task.id]" />
Just add model with ngRepeat's instance property
Like this
<li ng-repeat="task in taskslist | filter:query | orderBy:orderProp" class="items-list-item">
<input type="checkbox" ng-model="task.isChecked" />
</li>
You'll find value of isChecked from $scope.taskslist
JSFIDDLE
I want to filter questions out by clicking on their associated category name checkbox. Ex: only questions with category X will be shown if only category X checkbox is checked.
I'm able to bind the names Cat1, Cat2, etc directly to the catfilters object:
<input type="checkbox" ng-model="catfilters.Cat1" /> Cat 1
<input type="checkbox" ng-model="catfilters.Cat2" /> Cat 2
<ul>
<li ng-repeat="q in questions | bycategory:catfilters">{{q.question.cat_id}}</li>
</ul>
This works.
However, I want to dynamically create the category checkboxes from a list in the controller, and bind them to the catfilters object:
$scope.cats = [
'Cat1',
'Cat2',
'Cat3'
];
//c is 'Cat1', 'Cat2', etc...
<div ng-repeat="c in cats">
<input type="checkbox" ng-model="catfilters.c">{{c}}</span>
</div>
<ul>
<li ng-repeat="q in questions | bycategory:catfilters">{{q.question.cat_id}}</li>
</ul>
But for some reason, this will not apply the filtering. I am not getting any errors though.
Note: I've also tried looking up by indexed property:
<div ng-repeat="c in cats">
<input type="checkbox" ng-model="catfilters[c]">{{c}}</span>
</div>
This also does not work
Filter:
angular
.module('DDE').
filter('bycategory', function() {
return function (questions, categories) {
var items = {
categories: categories,
out: []
};
angular.forEach(questions, function (value, key) {
if (this.categories[value.question.cat_id] === true) {
this.out.push(value);
}
}, items);
return items.out;
};
}
);
catfilters.c looks for a property called c in catfilters, regardless of if you have a variable c elsewhere.
Try looking it up by the indexed property catfilters[c] instead.
//c is 'Cat1', 'Cat2', etc...
<div ng-repeat="c in cats">
<input type="checkbox" ng-model="catfilters[c]">{{c}}</span>
</div>
I have made a plunkr. I implement using
<div ng-repeat="input in inputs">
<input type="text" ng-model="filter[input]">
</div>
and
$scope.inputs = ['foo','bar'];
$scope.filter={
'foo':"Foo",
'bar':"Bar"
}
It is working fine (which i think is similar to your scenario).There must be something error in your implementation.
I have a list with items and checkboxes and want to return the number of checked rows. My directive looks like this:
<ul ng-repeat="person in list">
<li>
<input type="checkbox" ng-model="selected" >
<label ng-class="{blue:list.length>3,red:list.length<=3}"> {{person.name}}</label>
</li>
</ul>
What would be the angular way to display the nr of checked persons?
http://plnkr.co/edit/jJrH44?p=preview
http://plnkr.co/edit/5HzZA23D0P78nEzvmUpf?p=preview
number of checked lines:<span>{{ (list| filter:{selected:true}).length }}</span>
but you should change your list template as
<input type="checkbox" ng-model="person.selected" >
to link checkbox and model value