Here is my code
var filter1 = { id: 96, name: "Affinity Groups Allowed In Site",typeId: 74, description: "SiteAffinityGroupsAllowed" };
var filter2 = { id: 125, name: "AffinityLob", typeId: 100, description: "AffinityLob" };
$scope.filterCriteriaObjets = [filter1, filter2];
I am trying to get the name using ng-model but it seems the ng model is getting the whole object . Here is my dropdown
<select class="form-control" name="role" ng model="filterCriteria.ObjectName"
ng-options="item as item.name for item in filterCriteriaObjets" ng-required="true" ng-change="getObjectInfo()">
<option value="">- Select Filter Name -</option>
</select>
But when I change the option filterCriteria.ObjectName is getting the whole object. I want the ng-model to be equals just the name property
here is what you can do...
<select class="form-control" name="role" ng-model="filterCriteria.ObjectName"
ng-options="item.name as item.name for item in filterCriteriaObjets" ng-required="true" ng-change="getObjectInfo()">
<option value="">- Select Filter Name -</option>
</select>
your error is declaring ng-model you declared it as ng model
<!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>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<select class="form-control" name="role" ng-model="filterCriteria.ObjectName"
ng-options="item.name as item.name for item in filterCriteriaObjets" ng-required="true" ng-change="getObjectInfo()">
<option value="">- Select Filter Name -</option>
</select>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
var filter1 = { id: 96, name: "Affinity Groups Allowed In Site",typeId: 74, description: "SiteAffinityGroupsAllowed" };
var filter2 = { id: 125, name: "AffinityLob", typeId: 100, description: "AffinityLob" };
$scope.filterCriteriaObjets = [filter1, filter2];
});
</script>
</html>
Related
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>
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>
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");
});
I am trying to do a script that will copy the value of one select tag model to another and then trigger its ng-change function using a checkbox. What happens is when you click the checkbox, it does copy the value but the trigger does not work anymore. Seems like there is a conflict between setting a model's value and doing the trigger because either one of them fails.
Here is my code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body ng-controller="myCtrl">
<select ng-model="first.selection" id="first" ng-change="changeOver('dean')">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select> <br />
<input type="checkbox" ng-model="same" id="same" ng-change="sameAsAbove(first, second)"> Same as above <br />
<select ng-model="second.selection" id="second" ng-change="changeOver('armada')">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<!-- <span id="clickMe">Click Me!</span> -->
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout){
$scope.first = {};
$scope.second = {};
$scope.sameAsAbove = function(primary, receiver){
receiver['selection'] = primary['selection'];
$timeout(function() {
angular.element(document.getElementById('second')).triggerHandler('change');
}, 100);
};
$scope.changeOver = function(value){
alert(value);
}
});
$("#clickMe").click(function(){
// alert("czxvzx");
// $("#same").trigger("click");
$("#changes").change();
});
</script>
</body>
</html>
Here is the plunkr url: http://plnkr.co/edit/zErS4DaTgR79SBLbtGOy?p=preview
In DOM body you should change this line like this.
<select ng-model="second.selection" id="second" ng-change="same=second.selection">
and use watch to change the checkbox value
$scope.$watch("same", function(newValue, oldValue){
$scope.changeOver('armada');
//or do anything
});
plunker demo link
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>