I have radiobuttons in Angular 1 like this http://jsfiddle.net/md3coyzn/1/ and I need to change value to true / false when radio button is clicked, but I am still getting undefined value, and dont know why
$scope.radioContent = [
{txt: 'One', checked: true},
{txt: 'Two', checked: false}
];
<div ng-repeat="radio in radioContent">
<input type="radio" name="group" ng-model="radio.checked">{{radio.txt}} ---> {{radio.checked}}
</div>
as ng-repeat create its own scope. so you have to access by using $parent
HTML
<div ng-repeat="radio in radioContent track by $index">
<input type="radio" name="group[$index]" ng-model="$parent.selectedRadio" ng-change="$parent.radioChecked()" ng-value="radio" >{{radio.txt}}
</div>
JS
.controller('ExampleCtrl', ['$scope', function ($scope) {
$scope.selectedRadio;
$scope.radioContent = [
{txt: 'One', checked: true},
{txt: 'Two', checked: false}
];
$scope.radioChecked = function () {
console.log('selectedRadio', $scope.selectedRadio);
$scope.selectedRadio.checked = !$scope.selectedRadio.checked
}
}]);
please check the working Fiddle
hope it helps you.
An ng-click method to toggle the value of the radio buttons.
Note that value attribute of the button conflicts with the ng-model attribute so had to remove the later one.
angular.module('ExampleApp', [])
.controller('ExampleCtrl', ['$scope', function ($scope) {
console.clear();
$scope.radioContent = [
{txt: 'One', checked: true},
{txt: 'Two', checked: false}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp" ng-controller="ExampleCtrl">
<div ng-repeat="radio in radioContent">
<input type="radio" name="group" value="{{radio.checked}}" ng-click="radio.checked = !radio.checked">{{radio.txt}} ---> {{radio.checked}}
</div>
</div>
Related
I am using ng-options to display drop-down with options. Suppose I have three options in it for example option1, option2, option3.By default option1 is selected, now if a user selects option2, then $pristine becomes False and again if he selects option1 then from angularjs's prospective $pristine should be false but according to user he has not changed the option.So I was looking for a way to detect this change
Here is the Js fiddle demo
HTML
<div ng-app="myApp">
<div ng-controller="ctrl">
<form name="myForm">
{{myForm.$pristine}}
<select ng-model='list' ng-options='item.name for item in data'>
</select>
</form>
</div>
</div>
JS code
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.data = [{
id: 1,
name: 'test'
}, {
id: 2,
name: 'test1'
}];
$scope.list = $scope.data[0];
$scope.$watch('list', function(o, n) {
if ($scope.list == $scope.data[0])
$scope.myForm.$pristine = true;
})
});
You have add watch on your list model then this can be achieved
That is exactly what ng-change is for.
Usage would be like this (added $index to show you another option):
HTML
<div ng-app="myApp">
<div ng-controller="listController">
<form name="myForm">
<select ng-model="currOption"
ng-options='item.name for item in data'
ng-change="optionChanged(currOption, $index)">
</select>
</form>
</div>
</div>
Controller
angular.module('myApp')
.controller('listController', function($scope) {
$scope.data = [{
id: 1,
name: 'option1'
}, {
id: 2,
name: 'option2'
}, {
id: 3,
name: 'option3'
}];
$scope.optionChanged(option, index) {
// option = the selection the user just made.
// index = the index of the selection in your data. I.E. $scope.data[index]
};
});
I have the following in my controller:
var myApp = angular.module("myApp", []);
myApp.controller("TestCtrl", ['$scope', function($scope) {
$scope.rows = [
'Facebook',
'Twitter',
'Pinterest',
'Instagram',
'Tumblr',
'Google'
];
}]);
and I'm trying to show the content like this
<div class="container">
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<label ng-repeat="row in rows">
<input type="checkbox" ng-checked="row.selected" ng-model="row.selected" />{{row}}</label>
</div>
</div>
right now the items show, but I can't check the checkboxes,
check this Plunker
In order to have your checkbox checkable, you need to pass a valid ng-model there. In your case, row.selected is invalid since every row is a string and not object.
You can have your $scope.rows array like this instead:
$scope.rows = [{
name: 'Facebook',
selected: false
}, {
name: 'Twitter',
selected: false
}, {
name: 'Pinterest',
selected: false
}, {
name: 'Instagram',
selected: false
}, {
name: 'Tumblr',
selected: false
}];
Here's a forked plunker which has checkboxes checkable
I have two select i want to enable my button when i have selected values in my two select, i don't know how i can do this ?
JSFIDDLE
My HTML:
<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
<select
ng-options="people.first for people in people_1"
ng-model="selectedPerson1"></select>
<select
ng-options="people.first for people in people_2"
ng-model="selectedPerson2"></select>
</fieldset>
<br/><button class="btn btn-primary" ng-click="platform=true">Comparer</button>
</div>
You can do this using the ng-disabled directive. I have amended your jsfiddle here: http://jsfiddle.net/p0t4cw84/3/. I moved the button into the scope of the controller FirstCtrl and added a method on the scope that will return true or false if values are selected.
$scope.enableCompare = function () {
return !($scope.selectedPerson1 && $scope.selectedPerson2);
};
I hope this helps.
Here you go.There are lot of issue in you fiddle.I fixed it.
http://jsfiddle.net/purpz7u3/
<div ng-app="myapp">
<div ng-controller="FirstCtrl">
<fieldset >
<select
ng-options="people.first for people in people_1"
ng-model="selectedPerson1" ng-change="check()"></select>
<select
ng-options="people.first for people in people_2"
ng-model="selectedPerson2" ng-change="check()"></select>
</fieldset>
<br/><button class="btn btn-primary" ng-disabled="checked">Comparer</button>
</div>
</div>
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
$scope.checked = true;
$scope.people_1 = [
{ id: 1, first: 'John' },
{ id: 2, first: 'Rocky' }
];
$scope.people_2 = [
{ id: 1, first: 'Rambo' },
{ id: 2, first: 'Balboa'}
];
$scope.check = function(){
if($scope.selectedPerson1 && $scope.selectedPerson2){
$scope.checked=false;
}
}
});
I need to call a js function when an ng-repeat template is created:
<div ng-repeat="item in items">
<input id="ip{{item.id}}">
<script>$(function () { $('#ip{{item.id}}').kendoDatePicker(); });</script>
</div>
The id is replaced as expected, but angular doesn't seem to work inside script tags.
That is correct, Angular will not evaluate expressions in script tags. You will need to use a directive that will initialize the Kendo plugin for each element.
The good news is Kendo already has a module for integrating with Angular, so you might as well just use that. Here is a plunk I put together showing it in a repeater.
<div ng-repeat="item in items">
<label for="{{item.id}}">{{item.id}}</label>
<div>
<input kendo-date-picker ng-model="item.value" />
</div>
</div>
Controller:
angular.module("demo", ['kendo.directives'])
.controller('DemoCtrl', ['$scope',
function($scope) {
$scope.items = [{
id: 'item1',
value: null
}, {
id: 'item2',
value: null
}, {
id: 'item3',
value: null
}, {
id: 'item4',
value: null
}];
}
]);
How can I set a default value for the radios if this value is an object and not a string?
EDIT:
To make things more clear I updated 's fiddle:
Check out the fiddle:
http://jsfiddle.net/JohannesJo/CrH8a/
<body ng-app="app">
<div ng-controller='controller'>
oConfigTerminal value= <input type="text" ng-model="oConfigTerminal"/><br><br>
<div ng-show="!oConnection.aOptions"
ng-repeat="oConnection in oFormOptions.aStationaryConnections">
<label>
<input type="radio" name="connection" ng-model="$parent.oConfigTerminal" value="{{oConnection.id}}"
/>{{oConnection.sId}}</label>
</div>
</div>
app = angular.module('app', []);
app.controller('controller', function ($scope) {
$scope.oFormOptions = {};
$scope.oConfigTerminal=0;
$scope.oFormOptions.aStationaryConnections = [{
id: 1,
sId: "analog"
}, {
id: 2,
sId: "isdn"
}, {
id: 3,
sId: "dsl"
}];
// !!! Trying to set the default checked/selected value !!!
$scope.oConfigTerminal = $scope.oFormOptions.aStationaryConnections[0];
});
Inspect the live html in browser console and you will see that oConnection is an object and value of radio becomes: {"id":1,"sId":"analog"}. You probably want to use oConnection.id for value
One other issue within ng-repeat there is a scope inheritance issue that needs to be resolved for ng-model by setting ng-model to $parent.variableName
Your oConnectionTmpView didn't make any sense to me so for simplification I removed it:
HTML:
<div ng-show="!oConnection.aOptions" ng-repeat="oConnection in oFormOptions.aStationaryConnections">
<label>
<input type="radio"
name="connection"
ng-model="$parent.oConfigTerminal"
value="{{oConnection.id}}"
/>
{{oConnection.sId}}
</label>
</div>
JS:
app = angular.module('app', []);
app.controller('controller', function ($scope) {
$scope.oFormOptions = {};
$scope.oConfigTerminal = 0;
$scope.oFormOptions.aStationaryConnections = [{
id: 1,
sId: "analog"
}, {
id: 2,
sId: "isdn"
}, {
id: 3,
sId: "dsl"
}];
}
Demo: http://jsfiddle.net/CrH8a/14/