i have multiple radio button groups
i need to set one of each group (maybe none) as selected
datasource
html Code
<div class='row' ng-show="mk.selectedTypeAttributesID.length != 0">
<div class='col-xs-6 col-sm-6 col-md-6 col-lg-6' ng-repeat="att in selectedTypeAttributesID">
<div class="switch-field">
<div class="switch-title">{{att.name}}</div>
<div>
<input ng-repeat-start="val in att.Values" class="bttn-input" type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}" value="{{val.val}}" ng-click="mk.AttChange(att.id,val.val)" />
<label ng-repeat-end class="bttn-input" for="switch_{{val.val}}">{{val.val}}</label>
</div>
</div>
</div>
</div>
i need to use the value of 'Selected' On the datasource to set the checkbox
source Update
You need to use ng-model to select the radio button..
Where ng-model holds the selected value as shown below.
$scope.options = [{Selected: false, val: "red"}, {Selected: true, val:"Black"}, {Selected: false, val:"Pink"}];
$scope.selected = undefined;
var findResult = $scope.options.find(function(x){ return x.Selected == true });
if(findResult){
$scope.selected = findResult.val;
}
Here's a JSFiddle
Edit: Since the sources of the checkboxes are dynamic then build a dynamic selection tree for modal to bind to..
Here's an example:
$scope.options = [{ 0 : [{Selected: false, val: "red"}, {Selected: true, val:"Black"}, {Selected: false, val:"Pink"}]}, { 1 : [{ Selected: false, val: "2" }, { Selected: true, val: "1" }]}];
$scope.choices = [];
for(var i = 0; i < Object.keys($scope.options).length; i++){
var keys = Object.keys($scope.options);
$scope.choices.push({ Id: keys[i], Value: $scope.options[i][keys[i]].find(function(x){ return x.Selected == true }).val });
}
JSFiddle
Are you looking for a solution like so?
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.selectedTypeAttributesID = [{
id: 1,
Values: [{
val: "red",
selected: ""
}, {
val: "green",
selected: ""
}, {
val: "blue",
selected: ""
}]
},
{
id: 2,
Values: [{
val: "1",
selected: ""
}, {
val: "2",
selected: ""
}, {
val: "3",
selected: ""
}]
}
];
$scope.setVal = function(att, index, val) {
for (var k of att.Values) {
k.selected = "";
}
att.Values[index].selected = val;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div class='row'>
<div class='col-xs-6 col-sm-6 col-md-6 col-lg-6' ng-repeat="att in selectedTypeAttributesID">
<div class="switch-field">
<div class="switch-title">{{att.name}}</div>
<div>
<input ng-repeat-start="val in att.Values" class="bttn-input" type="radio" id="switch_{{val.val}}" name="switch_{{att.id}}" ng-value="val.val" ng-click="setVal(att, $index, val.val)" />
<label ng-repeat-end class="bttn-input" for="switch_{{val.val}}">{{val.val}}</label>
</div>
</div>
</div>
</div>
<pre>{{selectedTypeAttributesID | json}}</pre>
</div>
Related
The code below doesn't work if I use data in lst, it works, if I replace data with x, so is data a reserved keyword in AngularJS and why?
<script src="http://ajadata.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app='app1'>
<div id='Grocery' ng-controller='Grocery'>
<h3>Grocery List</h3>
<div ng-repeat='data in lst'>
<h4>{{data.item}}</h4>
</div>
<br>
<p> enter item:
<input type="text" ng-model='addItem' />
</p>
<button ng-click='addTolist(addItem)'>Add to list</button>
<button ng-click='addTolist(addItem)'>Add to list</button>
<h2>{{NoItemError}}</h2>
</div>
<!-- End of Grocery -->
<script>
var app1 = angular.module('app1', []);
app1.controller('Grocery', function($scope) {
$scope.lst = [{
item: 'banana',
needed: false
},
{
item: 'apple',
needed: false
},
{
item: 'milk',
needed: false
},
{
item: 'tomato',
needed: false
},
{
item: 'juice',
needed: false
}
]
$scope.addTolist = function(addItem) {
if (!(addItem === undefined || addItem === '')) {
$scope.lst.push({
item: addItem,
needed: false
});
$scope.NoItemError = '';
} else {
$scope.NoItemError = 'Please enter an item';
}
}
});
</script>
</body>
While replacing text with another, you broke your CDN URL for the AngularJS script.
It became http://ajadata.googleapis.com
Change it to http://ajax.googleapis.com
Here is a full script:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
And here is a working example of your code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app='app1'>
<div id='Grocery' ng-controller='Grocery'>
<h3>Grocery List</h3>
<div ng-repeat='data in lst'>
<h4>{{data.item}}</h4>
</div>
<br>
<p> enter item:
<input type="text" ng-model='addItem' />
</p>
<button ng-click='addTolist(addItem)'>Add to list</button>
<button ng-click='addTolist(addItem)'>Add to list</button>
<h2>{{NoItemError}}</h2>
</div>
<!-- End of Grocery -->
<script>
var app1 = angular.module('app1', []);
app1.controller('Grocery', function($scope) {
$scope.lst = [{
item: 'banana',
needed: false
},
{
item: 'apple',
needed: false
},
{
item: 'milk',
needed: false
},
{
item: 'tomato',
needed: false
},
{
item: 'juice',
needed: false
}
]
$scope.addTolist = function(addItem) {
if (!(addItem === undefined || addItem === '')) {
$scope.lst.push({
item: addItem,
needed: false
});
$scope.NoItemError = '';
} else {
$scope.NoItemError = 'Please enter an item';
}
}
});
</script>
</body>
Most reserved words in AngularJS start with $, for example $index or $id, etc.
I have this html markup:
<div ng-repeat="prop in props" style="margin-bottom: 10px;">
<label class="col-md-4 control-label">Property {{$index + 1}} ({{prop.AddressLine1}})</label><div class="col-md-8">
<select ng-model="prop.Grade" class="form-control" ng-options="opt.name for opt in propGradings track by opt.id"> <option ng-selected="{{option.id == prop.Grade}}" ng-repeat="option in propGradings" ng-value="{{option.id}}">{{option.name}}</option> </select>
</div>
</div>
This static array to fill in the dropdown:
$scope.propGradings = [{ name: "1", id: 1 }, { name: "2", id: 2 }, { name: "3", id: 3 }, { name: "4", id: 4 }];
I'm able to load the items in the dropdown, but I'm not able to preselect the correct value based on the prop.Grade value.
HTML Output:
Any idea what am I doing wrong?
When selecting options from a dropdown, type matters for binding purposes. When using ng-options, you can use as to bind something to the model as a non-string value. In your case, you may want to bind to the integer value of the id.
Syntax: select as label for value in array
> select: The value that gets bound to ng-model
> label: What value visibly shows up in the dropdown
> value: Current item in array
> array: Data source for generating the options
Example of binding to an integer value:
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.props = [{Grade: 1}];
$scope.propGradings = [{ name: "1", id: 1 }, { name: "2", id: 2 }, { name: "3", id: 3 }, { name: "4", id: 4 }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Binding with an integer value:
<div ng-repeat="prop in props" style="margin-bottom: 10px;">
<label class="col-md-4 control-label">Property {{$index + 1}} ({{prop.AddressLine1}})</label>
<div class="col-md-8">
<select ng-model="prop.Grade" class="form-control" ng-options="opt.id as opt.name for opt in propGradings">
<option ng-selected="{{option.id == prop.Grade}}" ng-repeat="option in propGradings" ng-value="{{option.id}}">{{option.name}}</option>
</select>
</div>
</div>
</div>
Example of binding to a string value:
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.props = [{Grade: "1"}];
$scope.propGradings = [{ name: "1", id: 1 }, { name: "2", id: 2 }, { name: "3", id: 3 }, { name: "4", id: 4 }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Binding with a string value:
<div ng-repeat="prop in props" style="margin-bottom: 10px;">
<label class="col-md-4 control-label">Property {{$index + 1}} ({{prop.AddressLine1}})</label>
<div class="col-md-8">
<select ng-model="prop.Grade" class="form-control" ng-options="opt.name as opt.name for opt in propGradings">
<option ng-selected="{{option.id == prop.Grade}}" ng-repeat="option in propGradings" ng-value="{{option.id}}">{{option.name}}</option>
</select>
</div>
</div>
</div>
How to add class to all siblings expect the clicked one. When I click the one I want, I want to apply class blue to all siblings not the one I clicked.
http://jsfiddle.net/bm6kujL1/
<div ng-app="editer" ng-controller="myCtrl" class="container">
<div ng-repeat="item in items">
<div class="wrap" ng-click="show =!show" ng-class="{'blue':show}">
<span>{{item.name}}</span>
<span ng-show="show">{{item.thing}}</span>
</div>
</div>
</div>
//JS
function myCtrl($scope) {
$scope.editedItem = null;
$scope.items = [{
name: "item #1",
thing: "thing 1"
}, {
name: "item #2",
thing: "thing 2"
}, {
name: "item #3",
thing: "thing 3"
}];
$scope.show = false;
}
var editer = angular.module('editer', []);
//CSS
.wrap {
background: yellow;
}
.blue {
background: blue;
}
I made some small changes to your JS fiddle, and it works now. Basically, you only had one attribute called show for all items, but you needed to know for each one if it should be blue or not.
JS:
function myCtrl($scope){
$scope.editedItem = null;
$scope.items = [
{ name :"item #1", thing: "thing 1", selected: false},
{ name :"item #2", thing: "thing 2", selected: false},
{ name :"item #3", thing: "thing 3", selected: false}
];
function resetAllItems() {
for (i in $scope.items) {
$scope.items[i].selected = false;
}
}
$scope.selectItem = function(item) {
resetAllItems();
item.selected = true;
}
}
HTML
<div ng-app="editer" ng-controller="myCtrl" class="container">
<div ng-repeat="item in items">
<div class="wrap" ng-click="selectItem(item)" ng-class="{'blue': item.selected}">
<span>{{item.name}}</span>
<span ng-show="item.selected" >{{item.thing}}</span>
</div>
</div>
</div>
You can use a function instead and use the item show property.
HTML:
<div class="wrap" ng-click="toggleShow(item)" ng-class="{'blue':item.show}">
<span>{{item.name}}</span>
<span ng-show="item.show">{{item.thing}}</span>
</div>
JS:
$scope.items = [{
name: "item #1",
thing: "thing 1",
show: false
}, {
name: "item #2",
thing: "thing 2",
show: false
}, {
name: "item #3",
thing: "thing 3",
show: false
}];
$scope.toggleShow = function(item){
for(var i=0; i<$scope.items.length; ++i){
if($scope.items[i] === item){
$scope.items[i].show = false;
continue;
}
$scope.items[i].show = true;
}
}
fiddle:
http://jsfiddle.net/bm6kujL1/2/
i wona get price and name of chosen radio buttons. its easy with simple html tags.
But I stacked when i trying generate radio buttons via angularjs from array (items)
Help!
http://jsfiddle.net/hanze/j9x23apu/
html
<h1>Select </h1>
<div ng-app="" ng-controller="OrderCtrl">
<div ng-repeat="item in items">
<div class="radio">
<label>
<input type="radio" name="item" ng-model="item" ng-checked="{{item.checked}}">
{{item.name}} +{{item.price}} $.</label>
</div>
</div>
Your choice: {{}} **what i must write here?**
<br>
Price: {{}} **and here?**
</div>
js
OrderCtrl = function ($scope) {
$scope.items = [{
name: 'None',
value: "no",
price: 0,
checked: true
}, {
name: 'Black',
value: "black",
price: 99,
checked: false
}, {
name: 'White',
value: "white",
price: 99,
checked: false
}, {
name: 'Barhat',
value: "barhat",
price: 49,
checked: false
}, {
name: 'Barhat',
value: "cream",
price: 49,
checked: false
}]
You can look at the angularjs documentaion about radio buttons here. You don't need to use ng-checked here. Use ng-value to set the value when redio is selected.
I changed your jsfiddle post.
Your are missing the closing tag for your input. And when you have ng-repeat you have a seperate scope. In this case you need $parent.selectedItem to hold your selected elements.
I have updated the JSFiddle with a working state solution.
<div ng-app="" ng-controller="OrderCtrl">
<div ng-repeat="item in items" style="text-indent: 30px">
<input type="radio" name="itemRadio" ng-model="$parent.selectedItem" ng-value="item.name"/>
{{item.name + '-' + item.price}}$.
</div>
Your choice: {{selectedItem}}
</div>
jsFiddle: http://jsfiddle.net/j9x23apu/16/
html
<div ng-app="" ng-controller="OrderCtrl">
<div ng-repeat="item in items" style="text-indent: 30px">
<label>
<input type="radio" name="item" ng-checked="{{item.checked}}" ng-click="change_item($event)" item-name="{{item.name}}" item-price="{{item.price}}" /> {{item.name}} + {{item.price}}
</label>
</div>
Your choice: {{selectedName}}
<br />
Price: {{selectedPrice}}
</div>
js
OrderCtrl = function ($scope) {
$scope.change_item = function(e) {
$scope.selectedName = e.target.attributes['item-name'].value;
$scope.selectedPrice = e.target.attributes['item-price'].value;
};
$scope.items = [{
name: 'None',
value: "no",
price: 0,
checked: true
}, {
name: 'Black',
value: "black",
price: 99,
checked: false
}, {
name: 'White',
value: "white",
price: 99,
checked: false
}, {
name: 'Barhat',
value: "barhat",
price: 49,
checked: false
}, {
name: 'Barhat',
value: "cream",
price: 49,
checked: false
}]
}
I am using angular-ui's sortable-ui module and am trying to raise a cancel so that the dragged items returns to it original location in the source list. Unfortunately I cannot get this working. Here is an example:
http://jsfiddle.net/Ej99f/1/
var myapp = angular.module('myapp', ['ui.sortable']);
myapp.controller('controller', function ($scope) {
$scope.list = ["1", "2", "3", "4", "5", "6"];
$scope.list2 = ["7", "8", "9"];
$scope.sortableOptions = {
update: function(e, ui) {
if (Number(ui.item.text()) === 6) {
ui.item.parent().sortable('cancel');
}
},
receive: function(e, ui) {
ui.sender.sortable('cancel');
ui.item.parent().sortable('cancel');
},
connectWith: ".group",
axis: 'y'
};
});
angular.bootstrap(document, ['myapp']);
Any help would be gratefully appreciated.
well, when it comes to angular, all roads lead to the data "the single source of truth". So update your model back to it's original state, before the move, and you're all set :)
example below has two lists, the first one being restricted for
its sorting (the update method)
and for sending an item (receive method on list 2)
the second list you can sort, and send items to list 1
(using foundation4 for css)
<div ng-app="test">
<div ng-controller="sortableTest">
<div class="small-4 columns panel">
<ul data-drop="true"
ui-sortable="sortable.options.list1" ng-model="sortable.model.list1">
<li ng-repeat="fruit in sortable.model.list1"
data-id="{{ fruit.id }}">{{ fruit.label }}</li>
</ul>
</div>
<div class="small-4 columns panel">
<ul data-drop="true"
ui-sortable="sortable.options.list2" ng-model="sortable.model.list2">
<li ng-repeat="element in sortable.model.list2"
data-id="{{ element.id }}">{{ element.label }}</li>
</ul>
</div>
<div class="clear"></div>
<br />
<span ng-repeat="fruit in sortable.model.list1">{{ fruit.label }} </span><br />
<span ng-repeat="element in sortable.model.list2">{{ element.label }} </span><br />
<span ng-repeat="fruit in sortable.oldData.list1">{{ fruit.label }} </span><br />
<span ng-repeat="element in sortable.oldData.list2">{{ element.label }} </span><br />
</div>
</div>
js:
var test = angular.module('test', ['ui.sortable']);
test.controller('sortableTest', function($scope, $timeout) {
$scope.sortable = {
model: {
list1: [{id: 1, label: 'apple'},{id: 2, label: 'orange'},{id: 3, label: 'pear'},{id: 4, label: 'banana'}],
list2: [{id: 5, label: 'earth'},{id: 6, label: 'wind'},{id: 7, label: 'fire'},{id: 8, label: 'water'}]
},
oldData: {
list1: [],
list2: []
},
options: {
list1: {
update: function(event, ui) {
console.debug('up-list1');
$scope.sortable.oldData.list1 = $scope.sortable.model.list1.slice(0);
$scope.sortable.oldData.list2 = $scope.sortable.model.list2.slice(0);
// DO NOT USE THIS! it messes up the data.
// ui.item.parent().sortable('cancel'); // <--- BUGGY!
// uncomment and check the span repeats..
$timeout(function(){
$scope.sortable.model.list1 = $scope.sortable.oldData.list1;
$scope.sortable.model.list2 = $scope.sortable.oldData.list2;
});
},
connectWith: 'ul'
},
list2: {
update: function(event, ui) {
console.debug('up-list2');
},
connectWith: 'ul',
receive: function(event, ui) {
console.debug('re-list2');
$timeout(function(){
$scope.sortable.model.list1 = $scope.sortable.oldData.list1;
$scope.sortable.model.list2 = $scope.sortable.oldData.list2;
});
}
}
}
};
});
you can of course use a service or something to store the old value. One can use ui.sender to differentiate the senders, if you have more that two..