im trying to get my second dropdownlist to work, but cant figure out what is the problem. The first one is showing the data, byt the second is not working.
html:
<select class="form-control"
ng-options="option as option.label for option in myCtrl.options track by option._id"
ng-model="myCtrl.selected"></select>
<select ng-disabled="!myCtrl.selected" class="form-control">
<option ng-repeat="child in myCtrl.options">#{{child.childs}}</option>
</select>
JS:
var vm = this;
vm.options = {};
//get populate data for cascading options
$http.get("data/support.json").success(function(response){
vm.options = response;
vm.selected = vm.options[0];
});
support.json
[{
"_id": "1",
"label": "Title 1",
"childs": [
"Title 1 - sub 1",
"Title 1 - sub 2"
]
},
{
"_id": "2",
"label": "Title 2",
"childs": [
"Title 2 - sub 1",
"Title 2 - sub 2"
]
}]
The second one should be
<option ng-repeat="child in myCtrl.selected.childs">{{child}}</option>
If you are trying to display the children of the selected parent option.
Also, your first select can have its options simplified to
ng-options="option.label for option in myCtrl.options track by option._id"
Related
I am having associate array like below :
$scope.item=
{
"Item1": [
{
"title": "Item1",
"choices": [
"Egg",
"burger",
]
}
],
"Item2": [
{
"title": "Item2",
"choices": [
"Pizza",
"Rice",
]
}
]
}
});
I am having 2 dropdown like below :
Dropdown 1 : Displaying Item1 and Item2 i.e title from both the list of items
Dropdown 2 : Displaying choices depending upon item selection. For example, if user selected Item1 then in 2nd dropdown I will display Egg,burger.
But I don't want to take 1 extra scope variable for binding this choices in my second dropdown.
I would like to get it from my item variable only based on Item selection but I am not understanding how to do this.
Right now I have commented out code for second dropdown because I am not getting how to pick choices from item in ng-options.
Is this not possible to bind second dropdown by picking item from 1 scope variable?
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.item = {
"Item1": [{
"title": "Item1",
"choices": ["Egg", "burger", ]
}],
"Item2": [{
"title": "Item2",
"choices": ["Pizza", "Rice", ]
}]
};
$scope.myItem = {
title: null,
choice: null
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<select ng-model="myItem.title" ng-options="value[0].title as key for (key , value) in item">
<option value="">Select Items</option>
</select>
<!--<select ng-model="myItem.choice" ng-options="value[0] as key for (key , value) in item" >
<option value="">Select choice</option>
</select>-->{{myItem.title}} </ul>
You can bind the first ng-model as an input to the second ng-options to do this without introducing a new scope variable.
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.item = {
"Item1": [{
"title": "Item1",
"choices": ["Egg", "burger", ]
}],
"Item2": [{
"title": "Item2",
"choices": ["Pizza", "Rice", ]
}]
};
$scope.myItem = {
title: null,
choice: null
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<select ng-model="myItem.title" ng-options="key as key for (key , value) in item">
<option value="">Select Items</option>
</select>
<select ng-model="myItem.choice" ng-options="value as value for value in item[myItem.title][0].choices">
<option value="">Select choice</option>
</select> {{myItem.title}}{{myItem.choice}} </ul>
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.item = {
"Item1": [{
"title": "Item1",
"choices": ["Egg", "burger", ]
}],
"Item2": [{
"title": "Item2",
"choices": ["Pizza", "Rice", ]
}]
};
$scope.myFunc = function() {
$scope.myItem.choices=$scope.item[$scope.myItem.title][0].choices;
};
$scope.myItem = {
title: null,
choices: null
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<select ng-model="myItem.title" ng-change="myFunc()" ng-options="value[0].title as key for (key , value) in item">
<option value="">Select Items</option>
</select>
<select ng-model="myItem.choice" ng-options="x for x in myItem.choices" >
<option value="">Select choice</option>
</select>{{myItem.choices}} </ul>
I have a multiselect dropdown bound to an array of objects ($scope.selectedProperties):
<select id="propertyDdl" multiple="multiple"
ng-model="selectedProperties"
ng-options="account.property_name group by account.client_name for account in accountInfo">
</select>
(accountInfo is a scope property containing an array of objects):
[{client_name:"Client 1", is_demo:false, property_name:"Prop 1"},
{client_name:"Client 2", is_demo:false, property_name:"Prop 2" },
{client_name:"Client 3", is_demo:false, property_name:"Prop 3" }]
on a certain event, I store the array of selected items:
$scope.updateSessionProperties = function () {
CachingService.cachedSelectedProperties = $scope.selectedProperties;
};
...Then reapply them later:
if(CachingService.cachedSelectedProperties && CachingService.cachedSelectedProperties.length>0){
$scope.selectedProperties = CachingService.cachedSelectedProperties;
}
the array of objects (selectedProperties) it is bound to is structured identical to accountInfo:
[{client_name:"Client 1", is_demo:false, property_name:"Prop 1"},
{client_name:"Client 2", is_demo:false, property_name:"Prop 2" }]
with no luck... the dropdown list displays "none selected" even though the scope property it is bound to is the identical object. I have tried executing $scope.$apply() as well, but the select element will not rebind.
After reading through ng-options, I would suggest the following:
<select
id="propertyDdl"
multiple="multiple"
ng-model="userSelectedProperties"
ng-options="account.property_name group by account.client_name for account in selectedProperties">
</select>
I would like to use uib-popover to create a popup/tooltip for an option item generated by ng-options for a select box. I have tried two approaches but neither one is quite good enough. Ng-options works well because I have to have a default item selected, but I cannot figure out how to plug in uib-popover. If I use ng-repeat I feel like I have more control over how each option is generated, but I can't figure how to select a defualt item for that scenario. Here is the code I am using for the ng-repeat method:
(function() {
"use strict";
var selectionTestViewModel = function() {
var vm = this;
vm.options = [
{ id: 1, val: "Option 1", desc: "Description of Option 1" },
{ id: 2, val: "Option 2", desc: "Description of Option 2" }
];
vm.selectedOption = vm.options[0];
};
angular.module("angularApp").controller("selectionTestController", [selectionTestViewModel]);
}());
<div class="page-content" ng-controller="selectionTestController as st">
<h2>Selection Test</h2>
<div>
<select ng-model="st.selectedOption">
<option ng-repeat="op in st.options track by op.id" value="{{op.id}}" title="{{op.desc}}">{{op.val}}</option>
</select>
<div>
<span>Selected Value: {{st.selectedOption}}</span>
</div>
</div>
</div>
I am using Javascript with Angular Js, In my controller I have the following Items :
$scope.address = [];
$scope.states = [
{ name:"State 1", cities:[ "City Mexico 1", "City Mexico 2","City Mexico 3"] },
{ name:"State 2", cities:["City 1", "City 2", "City 3"] }
];
In my view I am doing :
<select ng-model="address.state" placeholder="Estado" >
<option ng-repeat="state in states" value="{{state}}"> {{state.name}}</option>
</select>
If I select an option, and then I do console.log(address.state) I get the object as an String instead of as array. How can I get the object as array (json).
The console output look like this :
[state: "{"name":"State 1","cities":["City Mexico 1","City Mexico 2","City Mexico 3"]}"]
I want to get the object as array, because then I do $Scope.address.state.city
Instead of doing an ng-repeat on the <option> tag you can do ng-options in the <select> tag:
<select ng-model="address.state" ng-options="state.name for state in states" placeholder="Estados"></select>
That way the object of state is passed into $scope.address and you can do $scope.address.state.cities
Working example: https://plnkr.co/edit/k2gK5GNEt2xTrMbwih7V?p=preview
I nearly struggled as much naming this question as I am with the actual problem! I have two selects:
Select 1:
<select ng-change="bankSelected()" ng-model="user.bankName">
<option selected value="">Select</option>
<option ng-repeat="bank in banks" value="{{bank.name}}">{{bank.name}}</option>
</select>
Select 2:
<select ng-model="user.branch">
<option selected value="">Select</option>
<option ng-repeat="// what to do??"></option>
</select>
The 'bankSelected()' function in my controller:
$scope.bankSelected = function () {
console.log('Bank selected: ' + $scope.user.bankName);
}
I have a JSON file that I import all the bank objects from, here's an example:
{
"banks" : [
{
"name" : "Bank A",
"branches" : [
{
"name" : "Branch 1",
"code" : "1"
},
{
"name" : "Branch 2",
"code" : "2"
}
]
},
{
"name" : "Bank B",
"branches" : [
{
"name" : "Branch 3",
"code" : "3"
},
{
"name" : "Branch 4",
"code" : "4"
},
{
"name" : "Branch 5",
"code" : "5"
}
]
}
]
}
The JSON that I'm actually using though is about 1000 lines long. So my problem, is that if the user selects 'Bank A' in the first select box, I want the second select box to display 'Branch 1' and 'Branch 2'. Likewise if the user selects 'Bank B', I want to display 'Branch 3', 'Branch 4', and 'Branch 5'. If the user has not selected anything in the first select (e.g. no Bank selected), then the second select (branches) shouldn't contain anything. I'm sure you understand what I'm getting at?
How can I make this happen in AngularJS?
bank ng-repeat
<select ng-model="user.bankName">
<option selected value="">Select</option>
<option ng-repeat="bank in banks" value="{{bank.name}}">{{bank.name}}</option>
</select>
branch ng-repeat
<select ng-model="user.branch" ng-show="user.bankName">
<option selected value="">Select</option>
<option ng-repeat="branch in getBranches(user.bankName)" value="{{branch.code}}">{{ branch.name }}</option>
</select>
source of the branch repeat is assign to getBranches() function in the scope and here we pass the bank name which selected before.
in that function
$scope.getBranches = function(selectedBank) {
// get the selected bank object from the banks array
var filteredBank = $filter('filter')($scope.banks, selectedBank);
// return the branches of the selected bank
return filteredBank[0].branches;
};
don't forget to inject the $filter service as below
app.controller('CtrlName', function($scope, $filter) {...
here is the DEMO
If you can change your select to something like below it will be more cleaner :)
this will select the whole object of the selected option.
<select ng-model="user.bankName" ng-options="bank.name for bank in banks">
</select>
here we can use selected bank object to get the branches as user.bankName.branches.
<select ng-model="user.branch" ng-if="user.bankName" ng-options="branch.code as branch.name for branch in user.bankName.branches">
</select>
so we can get rid of the getBranches().
here is the DEMO