Is it possible to use nested for-loops in an ng-options expression?
The following python-style syntax does not work in AngularJS v1.5.8:
ng-options="user for group in userGroups for user in group.userNames"
angular.module('myApp', [])
.controller('LoginController', ['$scope', function ($scope) {
$scope.userGroups = [{
groupId: 1,
groupName: 'owner',
userNames: [
'John',
'Mary'
]
},
{
groupId: 2,
groupName: 'admin',
userNames: [
'Fred'
]
},
{
groupId: 3,
groupName: 'client',
userNames: [
'Company1',
'Company2',
'Company3'
]
}
];
$scope.selectedUserName = null;
$scope.$watch('selectedUserName', function(newValue, oldValue) {
console.log('selectedUserName changed from', oldValue, 'to', newValue);
});
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="LoginController">
<select
id="form-login-user"
ng-model="selectedUserName"
ng-options="user for group in userGroups for user in group.userNames"
>
<option></option>
</select>
</div>
Related
This is my HTML part
<select size="3" name="selectedSaleStatus[]" multiple ng-model="selectedSaleStatus" ng-options="type.name for type in config.saleStatus" >
</select>
Its my Controller
$scope.saleStatus = [
{'id': 18, 'name': 'ABC'},
{'id': 19, 'name': 'DEF'},
{'id': 20, 'name': 'GHI'}
];
I want my default selected item as ABC
Use http://mgcrea.github.io/angular-strap/#/selects
<button id="saleItems" type="button" placeholder="choose" ng-model="selectedSaleStatus"
bs-select data-multiple="1" max-length-html="choosed" bs-options="x.id as x.name for x in saleStatus">
</button>
And in controller
$scope.selectedSaleStatus = [18];
function testcontroller($scope, $filter) {
$scope.saleStatus = [{
'id': 18,
'name': 'ABC',
'val': true
},
{
'id': 19,
'name': 'DEF',
'val': false
},
{
'id': 20,
'name': 'GHI',
'val': false
}
];
$scope.selected = [{
id: 18,
name: "ABC"
}];
$scope.selectedValues = [];
$scope.$watch('selected', function(nowSelected) {
$scope.selectedValues = [];
if (!nowSelected) {
return;
}
angular.forEach(nowSelected, function(val) {
$scope.selectedValues.push(val.id.toString());
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app ng-controller="testcontroller">
<select multiple ng-model="sales">
<option ng-selected="{{sale.id == selectedValues}}" ng-repeat="sale in saleStatus" value="{{sale.id}}">{{sale.name}}</option>
</select>
</div>
</body>
I am trying to pass parameter to function changeBoard whole variable item but If i dont set value="item._id" i can't have default value. If I set i can only pass item._id.
Can someone help me how can I pass whole parametere item at the same time have default selected?
demo
https://codepen.io/Turqus/pen/LOjvLL?editors=1111
var app = angular.module('test', []);
template html
<div ng-app="test" ng-controller="select">
<select class="form-control" ng-model="selectedBoard" ng-change="changeBoard(selectedBoard)">
<option ng-repeat="item in arrayItems" value="{{item.id}}">{{item.name}}</option>
</select>
</div>
controller
var app = angular.module('test', []);
app.controller('select', $scope=>{
$scope.arrayItems = [
{'id': '133', 'name':'first', 'lists':[{'name': 1}, {'name': 2}]},
{'id': '134', 'name':'second', 'lists':[{'name': 1}, {'name': 2}]},
{'id': '135', 'name':'third', 'lists':[{'name': 1}, {'name': 2}]},
{'id': '136', 'name':'fourth', 'lists':[{'name': 1}, {'name': 2}]}
];
$scope.selectedBoard = '134';
$scope.changeBoard = (selectedBoard) => {
console.log(selectedBoard)
}
});
You can use the Javascript function .filter(). It's kind of like an SQL WHERE statement, but for Javascript arrays. It'll just filter out anything based on the function given for it.
In my example, you can remove the pass of selectedBoard to the function call in your ng-change method. Since you are already binding to the model $scope.selectedBoard.
! function() {
var app = angular.module('test', []);
var select = function($scope) {
$scope.arrayItems = [{
'id': '133',
'name': 'first',
'lists': [{
'name': 1
}, {
'name': 2
}]
},
{
'id': '134',
'name': 'second',
'lists': [{
'name': 1
}, {
'name': 2
}]
},
{
'id': '135',
'name': 'third',
'lists': [{
'name': 1
}, {
'name': 2
}]
},
{
'id': '136',
'name': 'fourth',
'lists': [{
'name': 1
}, {
'name': 2
}]
}
];
$scope.selectedBoard = '';
$scope.changeBoard = () => {
var obj = $scope.arrayItems.filter(item => item.id == $scope.selectedBoard);
// var obj = $scope.arrayItems.filter(function(item) { // Can also be written as this
// return item.id == $scope.selectedBoard;
// });
console.log(obj);
}
};
app.controller("select", ["$scope", select]);
}();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="select">
<select class="form-control" ng-model="selectedBoard" ng-change="changeBoard()">
<option ng-repeat="item in arrayItems" value="{{item.id}}">{{item.name}}</option>
</select>
</div>
I'm creating a search page where the user can search for data using pre-selected search criteria listed in the first drop-down. In the example below those criteria are 'First Name', 'Country' and 'Nationality'.
When the user selects Country or Nationality, a second drop-down appears to select one of the countries/nationalities. To fill this drop-down i use ng-options with a variable inside that points to a string defined in the controller.
But when one of those two options is selected and you want to switch to the other, the second drop-down does not get updated. The value inside ngOptions does get updated in the HTML, just the data inside the dropdown isn't.
When you select 'First Name' in between there is no issue. Does anyone know what I can use so the values inside the second dropdown gets updated?
Below is my code and a working plunker: http://plnkr.co/edit/LYpOdoLpgiMeHxlGzmub?p=preview
var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope) {
var vm = this;
vm.search = {id:0, criteria: {}, value: ''};
vm.referenceData = {
countries: [
{COUNTRY_ID:1, COUNTRY_NAME: 'UNITED KINGDOM'},
{COUNTRY_ID:2, COUNTRY_NAME: 'AUSTRALIA'},
{COUNTRY_ID:3, COUNTRY_NAME: 'SOUTH AFRICA'},
{COUNTRY_ID:4, COUNTRY_NAME: 'NETHERLANDS'},
],
nationalities: [
{NATIONALITY_ID: 1, NATIONALITY_NAME: "BRITISH"},
{NATIONALITY_ID: 2, NATIONALITY_NAME: "AUSTRALIAN"},
{NATIONALITY_ID: 3, NATIONALITY_NAME: "SOUTH AFRICAN"},
{NATIONALITY_ID: 4, NATIONALITY_NAME: "DUTCH"},
]
};
vm.criteriaList = [
{ name: 'First Name', key: 'FIRST_NAME'},
{ name: 'Country', key: 'COUNTRY_ID', options:'o.COUNTRY_ID as o.COUNTRY_NAME for o in ctrl.referenceData.countries' },
{ name: 'Nationality', key: 'NATIONALITY', options:'o.NATIONALITY_ID as o.NATIONALITY_NAME for o in ctrl.referenceData.nationalities' }
];
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="SomeController as ctrl">
<p>Criteria:</p>
<select ng-model="search.criteria" ng-change="search.value = ''" ng-options="criteria as criteria.name for criteria in ctrl.criteriaList">
<option value="">- Select Criteria -</option>
</select>
<p>Value:</p>
<!-- TEXT INPUT -->
<input type="text" ng-model="search.value" placeholder="Search Value" ng-if="!search.criteria.options" />
<!-- DROPDOWN INPUT -->
<select ng-model="search.value" ng-if="search.criteria.options" ng-options="{{search.criteria.options}}"></select>
</html>
This is an easy fix you just need a variable that can if out the second dropdown everytime you switch. The dom needs something to force it to refresh since there isnt a scope.$apply happening.
Plunker Working
Try this:
var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope, $timeout) {
var vm = this;
vm.somVal = false; ///ADD THIS
vm.search = {id:0, criteria: {}, value: ''};
vm.triggerSomeVal = function(){ ///ADD THIS
vm.someVal = true;
$timeout(function(){vm.someVal = false}, 100)
};
vm.referenceData = {
countries: [
{COUNTRY_ID:1, COUNTRY_NAME: 'UNITED KINGDOM'},
{COUNTRY_ID:2, COUNTRY_NAME: 'AUSTRALIA'},
{COUNTRY_ID:3, COUNTRY_NAME: 'SOUTH AFRICA'},
{COUNTRY_ID:4, COUNTRY_NAME: 'NETHERLANDS'},
],
nationalities: [
{NATIONALITY_ID: 1, NATIONALITY_NAME: "BRITISH"},
{NATIONALITY_ID: 2, NATIONALITY_NAME: "AUSTRALIAN"},
{NATIONALITY_ID: 3, NATIONALITY_NAME: "SOUTH AFRICAN"},
{NATIONALITY_ID: 4, NATIONALITY_NAME: "DUTCH"},
]
};
vm.criteriaList = [
{ name: 'First Name', key: 'FIRST_NAME'},
{ name: 'Country', key: 'COUNTRY_ID', options:'o.COUNTRY_ID as o.COUNTRY_NAME for o in ctrl.referenceData.countries' },
{ name: 'Nationality', key: 'NATIONALITY', options:'o.NATIONALITY_ID as o.NATIONALITY_NAME for o in ctrl.referenceData.nationalities' }
];
});
<p>Criteria:</p>
<select ng-model="search.criteria" ng-change="search.value = ''; ctrl.triggerSomeVal()" ng-options="criteria as criteria.name for criteria in ctrl.criteriaList">
<option value="">- Select Criteria -</option>
</select>
<p>Value:</p>
<!-- TEXT INPUT -->
<input type="text" ng-model="search.value" placeholder="Search Value" ng-if="!search.criteria.options" />
<!-- DROPDOWN INPUT ADD !someVal-->
<select ng-model="search.value" ng-if="search.criteria.options && !ctrl.someVal" ng-options="{{search.criteria.options}}"></select>
I have three multiselect dropdowns:-
<label>Dropdown One</label>
<div ng-model="a.dp1" ng-dropdown-multiselect="" options="multiSelectArray" selected-model="dropDownOne" extra-settings="multiSelectSettings">
</div>
<label>Dropdown Two</label>
<div ng-model="a.dp2" ng-dropdown-multiselect="" options="multiSelectArray" selected-model="dropDownTwo" extra-settings="multiSelectSettings">
</div>
<label>Dropdown Three</label>
<div ng-model="a.dp3" ng-dropdown-multiselect="" options="multiSelectArray" selected-model="dropDownThree" extra-settings="multiSelectSettings">
</div>
Directive Code:-
(function () {
'use strict';
angular.module('myApp.components')
.directive('page', page);
page.$inject = ['$http', '$timeout', 'ApiServices'];
function page($http, $timeout, ApiServices) {
return {
restrict: 'EA',
scope: {},
controller: function ($scope) {
$scope.a = { };
$scope.dropDownOne = [];
$scope.dropDownTwo = [];
$scope.dropDownThree = [];
$scope.multiSelectArray = [{
name: "Ayan"
}, {
name: "Rita"
}, {
name: "Mohit"
}, {
name: "Shittal"
}, {
name: "Jayant"
}, {
name: "Sachin"
}, {
name: "Tina"
}, {
name: "Babita"
}, {
name: "Priya"
}];
$scope.multiSelectSettings = {
smartButtonMaxItems: 11,
scrollable: true,
displayProp: "name",
idProp: "name",
externalIdProp: "name"
};
},
templateUrl: 'js/folder/system/page.html'
};
}
})();
What I am trying to do here is when I select particular options from 'Dropdown One' the same options got selected in 'Dropdown Two' and 'Dropdown Three' and get disabled so that users can't unselect them. Also, the users can select more options in 'Dropdown Two' and 'Dropdown Three' if they want, but the options from 'Dropdown One' should be checked already and disabled.
I am trying to disable the options using 'disabled' attribute but not able to for selected options. Any idea how I can do that?
In my controller I have this code:
$scope.lists = [{
listName: 'list1'
}, {
listName: 'list2'
}];
angular.forEach($scope.lists, function(item) {
var listName = item.listName;
$scope[listName] = [{
Name: 'Stefan'
}, {
Name: 'Stefan'
}, {
Name: 'Stefan'
}, {
Name: 'Stefan'
}];
});
The Input from lists cames from a webservice, so the values (list1 and list2) can be different each time i reload the app. I can also more then 2 items in lists.
How can I show the value from $scope[listName] in an ng-repat section in my view?
Thanks for your Help.
Stefan.
You might try something like this:
(function() {
angular.module("myApp", []).controller("controller", ["$scope",
function($scope) {
$scope.lists = [{
listName: "list1"
}, {
listName: "list2"
}];
angular.forEach($scope.lists, function(item) {
var listName = item.listName;
$scope[listName] = [{
Name: "Stefan"
}, {
Name: "Stefan"
}, {
Name: "Stefan"
}, {
Name: "Stefan"
}];
$scope.results = $scope[listName];
});
}
]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="myApp">
<div data-ng-controller="controller">
<ul>
<li data-ng-repeat="item in results">{{item.Name}}</li>
</ul>
</div>
</div>