I have ng-repeat of radio buttons:
<div ng-repeat="c in currencies">
<ion-radio ng-model="checkradio" ng-value='c.code' >
{{c.name}} {{c.code}}
</ion-radio>
</div>
I intend to $watch the model and the value of the selected radio buttons:
$scope.$watch('checkradio', function () {
$scope.checkradio = "";
})
I don't get any value from my radio buttons. Obviously, I'm doing something wrong. I tried other approaches but they didn't work. Can anyone suggest how to get the value from the radio buttons?
For binding you should have an object not a variabile.
Then in your controller you should have:
$scope.radios = [{name:"first", code:"1"}, {name:"second", code:"2"}];
$scope.model = { checked: "1" };//check the first element
and in your HTML:
<ion-radio ng-repeat="radio in radios" ng-model="model.checked" ng-value="radio.code">{{radio.name}}</ion-radio>
or
<div ng-repeat="c in currencies">
<ion-radio ng-model="model.checked" ng-value='c.code' >
{{c.name}} {{c.code}}
</ion-radio>
</div>
You can find a codepen here
try this, this may help you, Here is working fiddle
<div ng-controller="MyCtrl">
<div ng-repeat="(key,val) in currencies">
<input type="radio" ng-model="$parent.checkradioasd" ng-value='val.code' >
{{val.name}}
</div> <br>
<div>Selected : {{checkradioasd}}</div>
controller
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.currencies = [{name:'Option 1',code:1},{name:'Option 2',code:2}];
$scope.checkradio = $scope.currencies[0].code;
}
Related
I am new to AngularJS. I am trying to get the checkbox to appear as checked from previously selected value. I thought ng-class would do the trick but it's not. Did I do anything wrong in the code below?
Here is my HTML code:
<ul class="dropdown-menu menu-content" uib-dropdown-menu>
<li ng-repeat="value in values" >
<label><input type="checkbox" ng-class="{'checked' : value.selected, 'active' : value.selected}" ng-click="$ctrl.toggleValue(value)">{{value.valueName}}</label></li>
</ul>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
// dummy data
$scope.value = 1; // some value
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<input type="checkbox" ng-checked="value === 1">
</div>
</body>
Use inbuilt ng-checked directive of angular.
So I'm loading a bunch of questions from an api, every question has its own set of answers.
Im unable to populate the ng-model for radio box to record the selected answer
html
<div class="list">
<div class="item item-text-wrap" ng-repeat="question in vm.questions track by $index">
<h2>{{question.text}}</h2>
<ion-list if="question.type='mcq'">
<ion-radio ng-model="vm.answers[$index].answer_text" ng-value="'{{option.text}}'" ng-repeat="option in question.options" name="vm.answers[$index].answer_text">{{option.text}}</ion-radio>
</ion-list>
<input type="text" ng-if="question.type=='simple'" ng-model="vm.answers[$index].answer_text" placeholder="{{question.text}}"/>
</div>
</div>
relevalnt code from the controller
vm.answers = [];
api.need_assesment_questions.query(
//on success
function success(response) {
vm.questions = response;
//populate answers
for (var i = 0; i < vm.questions.length; i++) {
vm.answers.push({ question_text: vm.questions[i].text, answer_text: '' });
}
},
//on error
function error(response) {
alert(response.message);
}
);
The issue im facing is that answers array always rewrites the first answer text
fiddle : http://jsfiddle.net/pn2qL/76/
You need to initialise the question index on top and use it in your model, because there is another ng-repeat which override the previous $index
Try this
<div class="list">
<div class="item item-text-wrap"
ng-repeat="question in vm.questions track by $index"
ng-init="qIndex = $index">
<h2>{{question.text}}</h2>
<ion-list if="question.type='mcq'">
<ion-radio ng-model="vm.answers[qIndex].answer_text" ng-value="option.text" ng-repeat="option in question.options" name="{{vm.answers[qIndex].answer_text}}">{{option.text}}</ion-radio>
</ion-list>
<input type="text" ng-if="question.type=='simple'" ng-model="vm.answers[$index].answer_text" placeholder="{{question.text}}" />
</div>
</div>
Working fiddle
If I have for example a simple todo list:
HTML
<ul ng-repeat="todos in keyVar.list">
<li ng-class="{ 'completed' : keyVar.toggle }">
{{ todos }}
<input ng-if="!keyVar.toggle" type = "checkbox" ng-click="keyVar.toggle=true" >
<input ng-if="keyVar.toggle" type = "checkbox" checked= "true" ng-click="keyVar.toggle=false" ></input>
</li>
</ul>
JS
angular.module("todoApp", [])
.controller("mainCtrl", function(){
var keyVar = this;
keyVar.title ="Angular Todos";
keyVar.list=[];
keyVar.toggle = false;
keyVar.todosArr = function(){
keyVar.list.push(keyVar.todo)
keyVar.todo = "";
}
});
When I run this, I can add a todo, and check and uncheck the checkbox which toggles a class of completed, but it gives the class to every todo and if I check one checkbox, all of them go checked. I think I have to use something like keyVar.list[$index]? But I'm not sure where to use it or how.
Try like this. I define for each todo a status. and bind that to checkbox. when user click on checkbox change it.
angular.module("todoApp", [])
.controller("mainCtrl", function(){
var keyVar = this;
keyVar.title ="Angular Todos";
keyVar.list=[
{
"title":"Todo1",
"status":false
},
{
"title":"Todo2",
"status":false
}
];
keyVar.todosArr = function(){
keyVar.list.push({title:keyVar.todo,status:false})
keyVar.todo = "";
}
});
.completed{
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="todoApp" ng-controller="mainCtrl as keyVar" class="container">
<input type="text" ng-model="keyVar.todo">
<button ng-click="keyVar.todosArr()">Add Todo</button>
<ul ng-repeat="todos in keyVar.list">
<li ng-class="{ 'completed' : todos.status }">
{{ todos.title }}
<input ng-model="todos.status" type = "checkbox" ng-click="keyVar.toggle=true" >
</li>
</ul>
</div>
Try use ng-checked instead of ng-click.
<input ng-if="!keyVar.toggle" ng-checked="keyVar.toggle=true">
I have a simple GUI I would like to implement via pure AngularJS - there are two (or more) groups of checkboxes like here: http://jsbin.com/cemitubo/2/edit
Here is the code from the link below:
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<div class="group">
<input type="checkbox" ng-model="tag.aaa"/>
<input type="checkbox" ng-model="tag.ccc"/>
</div>
<div class="group">
<input type="checkbox" ng-model="tag.zzz"/>
</div>
{{tag}}
</div>
JS:
angular.module('myApp', [])
.controller('MyController', function($scope){
$scope.tag = {aaa: true};
});
Once A checkbox of one of the groups is checked all the checkboxes of the other groups should be unchecked (and the change obviously should be reflected in the model).
I tried to $watch the tag model variable and setting false to the variables of the other groups in $watch callback. The problem is that it fires the $watch callback each time tag is changed by $watch callback.
What is the proper AngularJS solution?
Thanks in advance!
Use ng-change instead $watch:
Something like:
$scope.changed = function(item, type){
console.log(item);
if((type == 'aaa' || type == 'ccc') ){
$scope.tag.zzz = !item;
}
else if(type == 'zzz'){
$scope.tag.aaa = !item;
$scope.tag.ccc = !item;
}
}
HTML
<div class="group">
<input type="checkbox" ng-model="tag.aaa" ng-change="changed(tag.aaa,'aaa')"/>
<input type="checkbox" ng-model="tag.ccc" ng-change="changed(tag.ccc,'ccc')"/>
</div>
<div class="group">
<input type="checkbox" ng-model="tag.zzz" ng-change="changed(tag.zzz, 'zzz')"/>
</div>
Demo JSBIN
I have a collection of items in $scope.data with fields "id","name" & "age", that are being displayed in the view using ng-repeat directive.
For each set of items, there is a corresponding "edit button".
I want to be able to access values for the particular set of items for which edit button was pressed.
Html:
<div ng-controller="Ctrl">
<div ng-repeat="i in data">
Name: {{i.name}}
Age: {{i.age}}
<form ng-submit="submit()">
<input type="text" ng-model="i.id"/>
<input type="submit" value="Edit" />
</form>
</div>
</div>
Script:
function Ctrl($scope)
{
$scope.data = [
{id:1,name:"Alex",age:22},
{id:2,name:"Sam", age:28}
];
$scope.submit = function() {
//access id of user for which edit was clicked
};
}
What is the right way to do this?
Instead of a form, I would suggest you just use a button:
<div ng-controller="Ctrl">
<div ng-repeat="i in data">
Name: {{i.name}}
Age: {{i.age}}
<input type="text" ng-model="i.id"/>
<button ng-click="submit(i)">Edit</button>
</div>
</div>
Just send i into the button click event (I suppose you could use form if you need validation, but your example doesn't seem to need it).
Your submit function then changes to:
$scope.submit = function(selectedItem) {
// here you now have access to selected item
};
Try this:
HTML:
<form ng-submit="submit(i.id)">
JavaScript:
$scope.submit = function(userId) {
// you have userId
};
One option is to just use an ng-click within a button that calls your submit passing in i
<div ng-controller="Ctrl">
<div ng-repeat="i in data">
Name: {{i.name}}
Age: {{i.age}}
<button ng-click="submit(i);">edit</button>
</div>
</div>
and the function:
$scope.submit = function(i) {
console.log(i);
//access id of user for which edit was clicked
};
Here's a fiddle of that working: http://jsfiddle.net/pRAcP/