repeat Select option in ng-repeat Angularjs - javascript

I have a form that repeat select option in ng-repeat. in this form i want to selected defualt value for select element. In fact in first select element selected value is "n1" and in second select element selected value is "n2". while in tow select element defualt value is "n2".
what is my problem?
function MyCntrl($scope) {
$scope.data = {
orders: [{ s:'' }]
};
$scope.list = [1,2];
$scope.data.orders[0] = "n1";
$scope.data.orders[1] = "n2";
$scope.sizes = [ {code: 1, name: 'n1'}, {code: 2, name: 'n2'}];
$scope.update = function() {
console.log($scope.item.code, $scope.item.name)
}
}
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyCntrl">
<div ng-repeat="l in list track by $index">
<select ng-model="data.orders[$index]" ng-change="update()">
<option ng-selected ="data.orders[$index] == size.name" ng-repeat="size in sizes">
{{size.name}}
</option>
</select>
</div>
<select ng-model="data.orders[0]" ng-change="update()">
<option ng-selected ="data.orders[0] == size.name" ng-repeat="size in sizes">
{{size.name}}
</option>
</select>
<select ng-model="data.orders[1]" ng-change="update()">
<option ng-selected ="data.orders[1] == size.name" ng-repeat="size in sizes">
{{size.name}}
</option>
</select>
</div>
</body>
</html>

Try this code instead. It uses $parent.$index instead of $index.
ng-repeat tracks by $index by default, so there's no need to specify it.
This causes a problem in your inner loop, which is also tracking by $index. When you say $index in the inner loop it picks up the inner loops index which is always going to evaluate to true.
function MyCntrl($scope) {
$scope.data = {
orders:[{ s:'' }]
};
$scope.list = [1,2];
$scope.data.orders[0] = "n1";
$scope.data.orders[1] = "n2";
$scope.sizes = [{code: 1, name: 'n1'}, {code: 2, name: 'n2'}];
$scope.update = function() {
console.log($scope.item.code, $scope.item.name)
}
}
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyCntrl">
<div ng-repeat="l in list track by $index">
<select ng-model="data.orders[$index]" ng-change="update()">
<option ng-selected ="data.orders[$parent.$index] == size.name" ng-repeat="size in sizes">
{{size.name}}
</option>
</select>
</div>
</div>
</body>
</html>

Related

angular select ng-selected not working (with <option ng-repeat>)

I've spent an hour and tried every conceivable permutation of properties to bind a select to a model as object, and ng-selected does nothing.
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes"
ng-selected="localModel.priceType == item"
ng-value="item"
>{{item.name}}</option>
</select>
or
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes"
ng-selected="localModel.priceType.id == item.id"
ng-value="item"
>{{item.name}}</option>
</select>
or
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes track by item.name"
ng-selected="localModel.priceType.name == item.name"
ng-value="item"
>{{item.name}}</option>
</select>
The select list renders correctly, option values look funky i.e "object:875". and selected does not work.
I need ng-model to be the object, not object.someId.
solved this by using ng-options instead of <option> ng-repat
<select ng-model="localModel.priceType" ng-options="item as item.namefor item in vm.priceTypes track by item.name"></select>
ngValue expects a string for the ngValue. To use ngRepeat with the <option> tag, then use value="{{item}}" instead of ng-value. Expand the snippet below to see it working.
angular.module('myApp', [])
.controller('ctrl', function($scope) {
$scope.vm = {
priceTypes: [{
id: 3,
name: 'pound'
},
{
id: 5,
name: 'Yen'
},
{
id: 6,
name: 'dollar'
}
]
};
//select model value
$scope.localModel = {
priceType: $scope.vm.priceTypes[1]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<select ng-model="localModel.priceType">
<option
ng-repeat="item in vm.priceTypes as item"
ng-selected="localModel.priceType.id == item.id"
value="{{item}}"
>{{item.name}}</option>
</select>
<div>
priceType: {{ localModel.priceType }}
</div>
</div>
A simpler approach is to use ngOptions on the <select> tag, with a combination of forms:
select as label for value in array track by expr
Refer to the comprehension_expression forms in the Arguments section under Usage for more information.
angular.module('myApp', [])
.controller('ctrl', function($scope) {
$scope.vm = {
priceTypes: [{
id: 3,
name: 'pound'
},
{
id: 5,
name: 'Yen'
},
{
id: 6,
name: 'dollar'
}
]
};
//select model value
$scope.localModel = {
priceType: $scope.vm.priceTypes[1]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<select ng-model="localModel.priceType" ng-options="item as item.name for item in vm.priceTypes track by item.name">
</select>
<div>
priceType: {{ localModel.priceType }}
</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngSelected
ngSelected does not interact with the select and ngModel
directives, it only sets the selected attribute on the element. If you
are using ngModel on the select, you should not use ngSelected on the
options, as ngModel will set the select value and selected options.
Try
<select ng-model="localModel.priceType">
<option ng-repeat="item in vm.priceTypes track by item.name"
ng-value="item.name">
{{item.name}}
</option>
</select>
You can change ng-value to any value you want from vm.priceTypes[0].

How to create dependent drop-down lists in html page using JavaScript and AngularJs with JSON data. [duplicate]

This question already has answers here:
Based on country selected , need to populate state and city
(2 answers)
Closed 5 years ago.
HTML code, that may not be correct:
<div ng-app="myApp" ng=controller="myCtrl">
States : <select id="source" name="source">
<option>{{state.name}}</option>
</select>
Districts: <select id="status" name="status">
<option>{{district.name}}</option>
</select>
Let say JSON content is as below:
State name:
s1, s2, s3, s4...and so on.
District name in state s1 are:
d1a,d1b,d1c,d1d...and so on
District name in state s2 are:
d2a,d2b,d2c,d2d...and so on
District name in state s are:
d3a,d3b,d3c,d3d...and so on ...like this.
I want that when user click on the states drop-down then the other drop-down should show the corresponding districts name.
You can do something like this,
<body ng-controller="SelectorCtrl">
<h1>Hello Plunker!</h1>
<select class="form-control" id="state" ng-model="divisionsSource" ng-options="stateName as stateName.State for stateName in data ">
<option value=''>Select</option>
</select>
<select class="form-control" id="district" ng-model="workplacesSource" ng-disabled="!divisionsSource" ng-options="division as division.districtName for division in divisionsSource.Districts ">
<option value=''>Select</option>
</select>
</body>
DEMO
angular.module('app', []).controller('SelectorCtrl', function($scope) {
$scope.data = [{
"State": "S1",
"Districts": [{
"districtName": "D1"
}, {
"districtName": "D2"
}, {
"districtName": "D3"
}]
}, {
"State": "S2"
}];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="SelectorCtrl">
<h1>Hello!</h1>
<select class="form-control" id="state" ng-model="divisionsSource" ng-options="stateName as stateName.State for stateName in data ">
<option value=''>Select</option>
</select>
<select class="form-control" id="district" ng-model="workplacesSource" ng-disabled="!divisionsSource" ng-options="division as division.districtName for division in divisionsSource.Districts ">
<option value=''>Select</option>
</select>
</body>
</html>
Try this code below.
index.html
<div data-ng-app="myApp" data-ng-controller="StateController as stateCtrl">
States :
<select id="source" name="source" data-ng-model="dataState" data-ng-options="state.id as state.name for state in states" data-ng-change="stateCtrl.changeState(dataState)">
<option value="">Select State</option>>
</select>
Districts:
<select id="status" name="status" data-ng-options="district.id as district.name for district in districts">
<option>{{district.name}}</option>
</select>
</div>
app.js
var state = angular.module("myApp", []);
state.controller('StateController', ['$window', '$scope', function($window, $scope) {
$scope.states = [{id: 1, name: 's1'}, {id: 1, name: 's2'}, {id: 1, name: 's3'}]; $scope.districts = {};
this.changeState = function(id) {
//Add whatever condition u need. Below code is a hard coded way. I recommend using ajax request to fetch district results based on states
if (id === 1) {
$scope.districts = [{id: 1, name: 'd1'}, {id: 1, name: 'd2'}, {id: 1, name: 'd3'}];
} else if (id === 2) {
$scope.districts = [{id: 1, name: 'd4'}, {id: 1, name: 'd5'}, {id: 1, name: 'd6'}];
}
}
}]);
What's left is how to remove the duplicate states. You could keep the in a separate array, where duplicates are removed, or use a unique filter as described here
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-filter-filter-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init="districts = [{state:'State 1', district:'District 1'},
{state:'State 1', district:'District 2'},
{state:'State 1', district:'District 3'},
{state:'State 2', district:'District 4'},
{state:'State 2', district:'District 5'},
{state:'State 3', district:'District 6'}]"></div>
<select ng-model="search.state">
<option></option>
<option ng-repeat="district in districts">{{district.state}}</option>
</select>
<select>
<option ng-repeat="district in districts | filter:search:strict">{{district.district}}</option>
</select>
</body>
</html>

AngularJS : Ng-Options in Array of Arrays inside select

I am trying show options from array of array inside a select drop down but it is not showing up. Can someone tell me what I am doing wrong here ? https://plnkr.co/edit/HMYbTNzkqkbAGP7PLWWB?p=preview
HTML :
<div ng-controller="MainCtrl">
<table>
<tr ng-repeat="r in rows track by $index">
<td>
<select ng-model="r.name"
ng-options="option.name as option.name for option
in availableOptions">
<option value="">Select Value</option>
</select>
</td>
<td>
<select ng-model="r.value"
ng-options="opt.name for opt in option.value for option in availableOptions | filter:{name: r.name}">
<option value="">Select Value</option>
</select>
</td>
<td>
<input type="button" ng-click="addRow()" value="Add">
</td>
<td>
<input type="button" ng-click="deleteRow($index)"
value="Delete">
</td>
</tr>
</table>
<div>
{{rows}}
</div>
JS :
var bb = [];
bb.push({name:"CCCC"});
bb.push({name:"AAAA"});
bb.push({name:"DDDD"});
var aa = [];
aa.push({name:"CCCC"});
aa.push({name:"AAAA"});
aa.push({name:"BBBB"});
var cc = [];
cc.push({name:"BBBB"});
cc.push({name:"AAAA"});
cc.push({name:"DDDD"});
var dd = [];
dd.push({name:"CCCC"});
dd.push({name:"AAAA"});
dd.push({name:"CCCC"});
$scope.availableOptions = [
{ name: 'TestA',
value : aa
},
{ name: 'TestB',
value : bb
},
{ name: 'TestC',
value : cc
},
{ name: 'TestD',
value : dd
},
{ name: 'TestE',
value : []
}
];
How do I specify the ng-options for value which is an array filtered based on name: 'TestE' or something ?
The are two problem sin your code :
1# you did not assign value to all aa,bb,cc,dd they were empty
2# Filter would return you array so you need to use its 1st element like this
<select ng-model="r.value"
ng-options="option.name as option.name for option
in (availableOptions | filter:{name: r.name})[0].value">
<option value="">Select Value</option>
</select>
See this https://plnkr.co/edit/cQTISC1SPucCCRQQ8ca7?p=preview
Your array are not coming through correct json format.. for more check it https://docs.angularjs.org/api/ng/directive/ngOptions
Assign the child collection to an array and use that array for populating the child dropdown:
<select ng-model="selectedChildren"
ng-options="option.value as option.name for option
in availableOptions"
data-ng-change="childOptions = selectedChildren">
<option value="">Select Value</option>
</select>
<select ng-model="value"
ng-options="option as option.name for option
in childOptions track by $index">
<option value="">Select Value</option>
</select>
Here, when parent dropdown is selected, the value property (which is basically child dropdown collection) is assigned to a scope variable childOptions which is inturn used for binding the child dropdown
https://plnkr.co/edit/mXz8jpzTrnRoqx5r7b1W?p=preview
Please make the following changes and try,
var app = angular.module('plunker', []);
app.filter('ddOptions')
app.controller('MainCtrl', function($scope) {
$scope.rows = [{name:""}];
$scope.secondOptions = [];
$scope.addRow = function(){
$scope.rows.push({name:""});
}
var bb = [];
bb.push({name:"CCCC"});
bb.push({name:"AAAA"});
bb.push({name:"DDDD"});
var aa = [];
aa.push({name:"CCCC"});
aa.push({name:"AAAA"});
aa.push({name:"BBBB"});
var cc = [];
cc.push({name:"BBBB"});
cc.push({name:"AAAA"});
cc.push({name:"DDDD"});
var dd = [];
dd.push({name:"CCCC"});
dd.push({name:"AAAA"});
dd.push({name:"CCCC"});
$scope.availableOptions = [
{ name: 'TestA',
value : aa
},
{ name: 'TestB',
value : bb
},
{ name: 'TestC',
value : cc
},
{ name: 'TestD',
value : dd
},
{ name: 'TestE',
value : []
}
];
$scope.populateOptions = function(name){
var temp = $scope.availableOptions.filter(function(val){ return val.name === name; })
console.log(temp);
$scope.secondOptions = temp[0].value;
}
$scope.deleteRow = function(index){
$scope.rows.splice(index,1);
}
});
and HTML,
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<table>
<tr ng-repeat="r in rows track by $index">
<td>
<select ng-model="r.name" ng-change="populateOptions(r.name)"
ng-options="option.name as option.name for option
in availableOptions">
<option value="">Select Value</option>
</select>
</td>
<td>
<select ng-model="r.value"
ng-options="option.name as option.name for option
in secondOptions">
<option value="">Select Value</option>
</select>
</td>
<td>
<input type="button" ng-click="addRow()" value="Add">
</td>
<td>
<input type="button" ng-click="deleteRow($index)"
value="Delete">
</td>
</tr>
</table>
<div>
{{rows}}
</div>
</div>
</body>
</html>

document getelementbyid options selectedindex in angularjs

This works in perfect javascript
document.getElementById("mySelect").selectedIndex = "0"
<select class="selectpicker" id="mySelect">
<option>English </option>
<option>Español </option>
</select>
How do you do this same but in Angularjs
app.controller("BodyController",function($scope){
/****************codeeeeeeeeeeeeeeeeeeeeeeeeee*/
});
One way is to add the ng-model attribute to the select tag, and then set the value of the matching variable in the scope (corresponding to the scope set in the controller). See the example below - bear in mind that value attribute were added to the options. And like tymeJV mentioned, ngOptions would typically be used in an angular application to set the option nodes inside the select tag (see the second example below).
angular.module('app',[])
.controller("BodyController",function($scope){
//set the model value to 'en', so the select list will select the option with value=='en'
$scope.lang = 'en';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="BodyController">
<select class="selectpicker" id="mySelect" ng-model="lang">
<option value="en">English </option>
<option value="es">Español </option>
</select>
</div>
Using ngOptions:
angular.module('app',[])
.controller("BodyController",function($scope){
//set the model value to 'en', so the select list will select the option with value=='en'
$scope.lang = {name: 'English', id: 'en'};
$scope.langs = [
{name: 'English', id: 'en'},
{name: 'Español', id: 'es'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="BodyController">
<select class="selectpicker" id="mySelect" ng-model="lang" ng-options="lang.name for lang in langs track by lang.id">
</select>
</div>

"[object Object]" instead of Object is passed to ng-model for <select> when I select an option with Object

I use an example from Angular documentation: https://docs.angularjs.org/api/ng/directive/select
"Using ngValue to bind the model to an array of objects" section.
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-select-ngvalue-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="ngvalueSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="ngvalueselect"> ngvalue select: </label>
<select size="6" name="ngvalueselect" ng-model="data.model" multiple>
<option ng-repeat="option in data.availableOptions" ng-value="option.value">{{option.name}}</option>
</select>
</form>
<hr>
<pre>model = {{data.model | json}}</pre><br/>
</div>
</body>
</html>
app.js:
(function(angular) {
'use strict';
angular.module('ngvalueSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
model: null,
availableOptions: [
{value: 'myString', name: 'string'},
{value: 1, name: 'integer'},
{value: true, name: 'boolean'},
{value: null, name: 'null'},
{value: {prop: 'value'}, name: 'object'},
{value: ['a'], name: 'array'}
]
};
}]);
})(window.angular);
Plunker: https://plnkr.co/edit/aHgqeK1pQHS5zfiIjyZv?p=preview
The problem: Every <option> represents object. I select an item and "[object Object]" is assigned to ng-model of <select> instead of object.
Angular recommends to use ng-options instead of repeater with options but I need to use some extra logic for every option like ng-style (different for every option).
The question is: how to make object be passed as Object instead of String in ng-model of <select> when user select an option from select.
Why not ng-options?
<select size="6" name="ngvalueselect" ng-model="data.model" ng-options="item.value as item.name for item in data.availableOptions" multiple></select>
Working plunker https://plnkr.co/edit/zVzTI6sR6LywC9vcZRkn
I believe your select should look something like this:
<select size="6" name="ngvalueselect" ng-model="data.model" ng-options="option.value as option.name for option in data.availableOptions" multiple>
So there should not be any individual option item
$(this).find(":selected").data("value")
<form name="myForm">
<label for="ngvalueselect"> ngvalue select: </label>
<select size="6" name="ngvalueselect" ng-model="data.model" multiple>
<option ng-repeat="option in data.availableOptions" data-option="{{option.value}}">{{option.name}}</option>
</select>
</form>
<hr>
<pre>model = {{data.model | json}}</pre><br/>
</div>
</body>
</html>
and if jquery use:
$(document).on("change","select",function(){
var objectOrStringReturend = $(this).find(":selected").data("value");
});

Categories