I've got small problem with ng-repeat on persons with multiple radio inputs (yes/no). Input names should be different because of name="person.name" but it behaves like they all are the same. Somebody knows how to fix this?
http://jsfiddle.net/Chotkos/EbU8g/
HTML:
<form name="myForm" ng-controller="MyCtrl">
<p>Decisions</p>
<ul>
<li ng-repeat="person in people">
<label>{{person.name}}
<input type="radio" ng-model="person.decision" name="person.name" value="Yes" />
<input type="radio" ng-model="person.decision" name="person.name" value="No" />
</label>
</li>
</ul>
</form>
JS:
function MyCtrl($scope) {
$scope.people = [{
name: "John"
}, {
name: "Paul"
}, {
name: "George"
}, {
name: "Ringo"
}];
}
You need to use {{ person.name }}, rather than "person.name" in that context.
I don't know why you got downvoted. Your question was fine. So you are using the name property which is traditional in an HTML form. Since name isn't part of angular, you need to wrap the person.name in curly brackets name="{{person.name}}" so angular knows to parse it.
Please see here: http://jsfiddle.net/Chotkos/EbU8g/
that happend because you wrapped all inputs into label tag
<form name="myForm" ng-controller="MyCtrl">
<p>Decisions</p>
<ul>
<li ng-repeat="person in people">
<label>{{person.name}}</label>
<input type="radio" ng-model="person.decision" name="person.name" value="Yes" />
<input type="radio" ng-model="person.decision" name="person.name" value="No" />
</li>
</ul>
</form>
Related
I have some basic example of form with radio inputs DEMO on PLNKR:
<form class="some-inputs">
<div ng-repeat="da in data">
<span>{{$index}}: {{da}}</span>
<label>
<input type="radio" id="lock-{{$index}}"
name="lock-choice-{{$index}}"
ng-model="mdl['account-{{$index}}']['blocked']"
ng-value="da.blocked">
<span>blocked</span>
</label>
<label>
<input type="radio" id="unrealized-{{$index}}"
name="lock-choice-{{$index}}"
ng-model="mdl['account-{{$index}}']['unrealized']"
ng-value="da.unrealized">
<span>not blocked</span>
</label>
</div>
</form>
As you can see, I'm not using ng-checked, just ng-model and ng-value.
Also there are objects with properties printed, for comparison purposes.
Question is, why in every example, second radio button is checked, even if it's value is false - thus first radio which is truthy should be checked - ?
When I delete ng-value attributes from input, no radios are checked, even if properties from ng-models already have values which could make it happen..
When doing ng-repeat with objects, use (key, value) as the iterator:
̶<̶d̶i̶v̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶d̶a̶ ̶i̶n̶ ̶d̶a̶t̶a̶"̶>̶
<div ng-repeat="(key,da) in data">
It makes the HTML clearer.
The DEMO
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.data = {
"account-0":{
"blocked":true,
},
"account-1":{
"blocked":false,
},
"account-2":{
"blocked":false,
},
"account-3":{
"blocked":true,
}
};
$scope.mdl = {};
angular.forEach($scope.data, (value, key)=> {
$scope.mdl[key] = {choice: value.blocked?'blocked':'not blocked'};
});
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<form name="form1">
<div ng-repeat="(key, da) in data">
<span>{{key}}</span>
<label>
<input type="radio" id="{{key}}-blocked"
name="block-choice-{{key}}"
ng-model="mdl[key].choice"
ng-value="'blocked'">
<span>blocked</span>
</label>
<label>
<input type="radio" id="{{key}}-not-blocked"
name="block-choice-{{key}}"
ng-model="mdl[key].choice"
ng-value="'not blocked'">
<span>not blocked</span>
</label>
<label>
<input type="radio" id="{{key}}-undecided"
name="block-choice-{{key}}"
ng-model="mdl[key].choice"
ng-value="'undecided'">
<span>undecided</span>
</label>
</div>
<hr>
<div ng-repeat="(k,v) in mdl">
{{k}} {{v}}
</div>
</form>
</body>
Hey so I'm currently a newbie in Vue so have some mercy :)
I am trying to implement a filter bar, where I want to render the checked-box onto a collection view. So a use case would be, if T-shirts was checked then that should render all T-shirts from a DB.
So currently I'm grabbing all the values of beers from my database and rendering that into my filter box:
<div class="overflow menu-list">
<ul>
<li v-for="brewery in breweryName">
<input type="checkbox" name="beer">{{brewery}}
</li>
</ul>
</div>
Where my Vue instance is defined as so:
var filterVM = new Vue({
el: '#filter-bar',
data : {
breweryName : grabFromBeerDB("brewery"),
beerStyle : grabFromBeerDB("style"),
checkedBrewery : []
},
firebase : {
beerList: beerDatabaseRef
}, ...
My only question here is how would I reactively grab the values of the boxes that are checked?
Thanks for the help
Just use v-model
<input type="checkbox" name="beer" value="A" v-model="checkedBrewery">
<input type="checkbox" name="beer" value="B" v-model="checkedBrewery">
<input type="checkbox" name="beer" value="C" v-model="checkedBrewery">
docs: https://v2.vuejs.org/v2/guide/forms.html#Checkbox
<li v-for="brewery in breweryName">
<input type="checkbox" name="beer" :value="brewery" v-model="checkedBrewery">
{{brewery}}
</li>
The value of input is required, and you must make sure each value is different with others.
CodePen is here
I want different scope for business and consumers field. currently it apply for both. It should be when user click on consumers check box show input field, as well as with business.
<div ng-app="DataEntryApp" ng-controller="DataEntryController">
<div>
<labes> Products for consumers </label>
<li ng-repeat="item in INDproducttypes">
<span>{{ item.value}}</span>
<input type="checkbox" ng-model="item.status" />
</li>
<label>--------------------------------------</label>
</br>
<label> Products for business </label>
<li ng-repeat="item in INDproducttypes">
<span>{{ item.value}}</span>
<input type="checkbox" ng-model="item.status" />
</li>
</div>
<div ng-repeat="item in INDproducttypes">
<div ng-show="item2.status">
<input type="text" name="name">
</div>
</div>
<div ng-repeat="item in INDproducttypes">
<div ng-show="item.status">
<input type="text" name="name">
</div>
</div>
</div>
My controller page
var myApp = angular.module("DataEntryApp", []);
myApp.controller("DataEntryController", function($scope) {
$scope.INDproducttypes = [{
"id": 1,
"value": "Term Loans",
"status": false
}, {
"id": 2,
"value": "Lines of Credit",
"status": false
}, {
"id": 3,
"value": "Credit Card self-issued",
"status": false
}, {
"id": 4,
"value": "Mortgages",
"status": false
}]
});
TLDR: See a working pen # http://codepen.io/anon/pen/gwwLzE
You have a different scope for each ng-repeat, but scope is not the issue here.
What's happening is you are using ng-repeat 4 times on the same array, hence the same objects in the array so this means you are constantly pointing to the same objects in memory (heap). Please do some reading on Stack vs Heap and how they both function.
Basicly, since we are accessing the same array of objects 4 times, and we are updating the item.status property of a particular object in that array, this would update all other ng-repeats as it's the exact same object being referencend.
A solution would be to have two arrays:
One for consumers
One for business
This can be achieved using:
$scope.consumersProductTypes = $scope.INDproducttypes;
$scope.businessProductTypes = angular.copy($scope.INDproducttypes);
now update your view accordingly:
<div ng-app="DataEntryApp" ng-controller="DataEntryController">
<div>
<labes>
Products for consumers </label>
<li ng-repeat="item in consumersProductTypes">
<span>{{ item.value}}</span>
<input type="checkbox" ng-model ="item.status" />
</li>
<label>--------------------------------------</label></br>
<label> Products for business </label>
<li ng-repeat="item in businessProductTypes">
<span>{{ item.value}}</span>
<input type="checkbox" ng-model ="item.status" />
</li>
</div>
<div ng-repeat="item in consumersProductTypes">
<div ng-show ="item.status">
<input type="text" name="name">
</div>
</div>
<div ng-repeat="item in businessProductTypes">
<div ng-show ="item.status">
<input type="text" name="name">
</div>
</div>
See a working pen # http://codepen.io/anon/pen/gwwLzE
If I understand your question correctly you just want to separate the two different lists so they aren't synced?
In that case, I think that there is a problem with your model, since it only has one "status" attribute. You should consider renaming the "status" attribute to something more descriptive, what is status anyways? You could separate them into consumer_status and business_status maybe, even if that doesn't help to clarify what it actually is it helps with the sync problem.
I am trying to populate multiple groups of radio buttons in a loop and using a combination of group name and index for the name so as to uniquely group the radio buttons. The issue is - only the last group in the loop has the radio button checked. Other groups in the loop has nothing checked.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - Dynamically populate Radio buttons in a loop</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body ng-app="radioSetsExample">
<script>
angular.module('radioSetsExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.groups = [{
name: 'group_one',
type: 'CHOOSE'
}, {
name: 'group_two',
type: 'ADD'
},
{
name: 'group_three',
type: 'ADD'
}];
}]);
</script>
<form ng-controller="ExampleController">
<div class="radio-inline" ng-repeat="group in groups">
{{group.name}} - TYPE:
<label>
<input type="radio" name="{{group.name}}_{{$index}}" value="CHOOSE" ng-model="group.type">
Choose
</label>
<label>
<input type="radio" name="{{group.name}}_{{$index}}" value="ADD" ng-model="group.type">
Add
</label>
</div>
</form>
</body>
</html>
Plunker
Everything works fine if I manually give unique 'name' to each group in the loop and don't use index. But I cannot do that really since the list is going to be dynamic and there are no unique names. I have to depend on index to generate unique names to each group.
What am I missing here?
you can use name="{{group.name+'_'+$index}}" instead of name="{{group.name}}_{{$index}}" then should wok fine.
<form ng-controller="ExampleController">
<div class="radio-inline" ng-repeat="group in groups">
{{group.name}} - TYPE:
<label>
<input type="radio" name="{{group.name+'_'+$index}}" value="CHOOSE" ng-model="group.type">
Choose
</label>
<label>
<input type="radio" name="{{group.name+'_'+$index}}" value="ADD" ng-model="group.type">
Add
</label>
</div>
</form>
Radio buttons require unique name property, what's happening currently is that the while iterating in the ng-repeat, first iteration gives the same name group_one_1 to both Add and Choose radio.
Would this be possible:
<label>
<input type="radio" name="choose_{{$index}}" value="CHOOSE" ng-model="group.type">
Choose
</label>
<label>
<input type="radio" name="add_{{index}}" value="ADD" ng-model="group.type">
Add
</label>
Updated Working Plunk
I am having some difficulty in using the jQuery Validator plugin. I have a list of checkboxes with different name attributes and I can't seem to figure out how to ensure that at least one of them has been checked. Everything that I find on Google seems to only work when the name attribute is the same.
Here is some sample code (updated):
<ul id="email_lists">
<li>
<input name="checkbox1" type="checkbox" /> List 1
</li>
<li>
<input name="checkbox2" type="checkbox" /> List 2
</li>
<li>
<input name="checkbox3" type="checkbox" /> List 3
</li>
<li>
<input name="checkbox4" type="checkbox" /> List 4
</li>
</ul>
I want to make sure that at least one of those is checked. Unfortunately, I cannot make the names the same as it is form that submits to a third-party email marketing application and it is expecting specific name attributes for these checkboxes.
Update
I am aware of how to do this using plain jQuery, but I would prefer to use the jQuery Validator plugin since that is how all of the other validation on the page is done.
I can group those checkboxes using jQuery by saying $('#email_lists li');, but I'm not really sure how to use something like that and tell the jQuery Validator plugin to use that as a group.
Assuming that you can give the checkboxes a class name (the jQuery needs something to work with):
<input class="validationGroupOne" name="checkbox1" type="checkbox" />
<input class="validationGroupOne" name="checkbox2" type="checkbox" />
<input class="validationGroupOne" name="checkbox3" type="checkbox" />
<input class="validationGroupOne" name="checkbox4" type="checkbox" />
You should be able to plug in the .validationGroupOne class-selector in place of the, usual, name attribute.
This was my solution :-)
Use:
<div id="list">
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
</div>
<input type="hidden" name="the_real_field_name" />
Then in jquery validate plugin block:
rules : {
chkbox: "required"
},
Then store the values as an array into a single hidden field like:
function updateInput() {
var allVals = [];
$('#list :checked').each(function() {
allVals.push($(this).val());
});
$('#the_real_field_name').val(allVals);
}
$(function() {
$('#list input').click(updateInput);
updateInput();
});