<select ng-model="data" ng-options="key as value for (key,value) in data">
<options value="">Select</options>
</select>
Here I want to disable 2 options from the select options based on some condition (other ng-model). How can I do it. I am new to UI development I searched for it but I see no information.
Here the data contains the following content in it
A - Abcde
B - Efghi
C - Ijklm
D - Mnopq
E - Qrstu
The actual ng I want is when the rate is greater than 24000 disable options B - Efghi and D - Mnopq.
Any help is appreciated.
If you want to disable with ng-options you need a disable when added to the query with some condition in it.
Here is a simple example with a hard-coded condition:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.array = {
"A": "Abcde",
"B": "Efghi",
"C": "Ijklm",
"D": "Mnopq",
"E": "Qrstu",
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="data"
ng-options="key as value disable when (key=='B' || key=='D') for (key,value) in array">
<option value="">Select</option>
</select>
<p>{{data}}</p>
</div>
Related
Dears, I am using a chosen select drop down list in select tag, and I added an ng-change tag to bind it to a function. Also I made a console.log to monitor the sent key. I found that when page load and select one item from the list it works good and sends the correct key. BUT when I select the same item it sends the key of the next item in the list. any help how to fix it
HTML
<div class="form-group">
<select ng-change="GetUsersList(j)" data-placeholder="Choose a Job"
ng-model="j" id="chosenValueID" class="chosen-select"
tabindex="1"
ng-options="j.JobKey as j.JobDesc for j in jobs">
</select>
<!--<select ng-change="GetUsersList(job)" data-placeholder="Choose a Job" ng-model="job" id="chosenValueID" class="chosen-select" tabindex="2">
<option ng-repeat="j in jobs track by $index" value="{{j.JobKey}}">{{j.JobDesc}}</option>
</select>-->
</div>
Angularjs
$scope.GetUsersList = function (job) {
//var jobkey1 = $("#chosenValueID").chosen().val();
//$scope.jobkey2 = jobkey1.substring(7);
console.log(job);
$scope.ShowLoading('slow');
FieldsSecuritySrv.GetUsersList("FieldsSecurity/GetUsersList?hospid=" + $scope.hospitalid + '&jobkey=' + job).then(function (response) {
$scope.UsersList = (response.data);
GetFieldsList();
GetCategriesList();
GetPatientSheets();
$scope.HideLoading('slow');
})
}
Thanks in Advance
No idea how you can bind jobs but can try ...
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.jobs=[
{JobKey : "1", JobDesc : "IT"},
{JobKey : "2", JobDesc : "Sales"},
{JobKey : "3", JobDesc : "Marketing"}
];
$scope.GetUsersList = function(job){
alert(job);
}
}]);
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div class="form-group">
<select ng-change="GetUsersList(j)" data-placeholder="Choose a Job" ng-model="j" id="chosenValueID" class="chosen-select" tabindex="1" ng-options="j.JobKey as j.JobDesc for j in jobs"> </select>
</div>
</div>
</body>
</html>
your j variable in HTML is somehow messy, it is indexed for ng-repeat and used as ng-modal as well, so $scope.j is also created :(
<select ng-change="GetUsersList()" data-placeholder="Choose a Job" ng-model="selectedJob" id="chosenValueID" class="chosen-select"
tabindex="1" ng-options="j.JobDesc for j in jobs"></select>
In angular:
//initialize the way u like
$scope.selectedJob = $scope.Jobs[0];
$scope.GetUsersList = function () {
//var jobkey1 = $("#chosenValueID").chosen().val();
//$scope.jobkey2 = jobkey1.substring(7);
console.log($scope.selectedJob.jobKey);
$scope.ShowLoading('slow');
FieldsSecuritySrv.GetUsersList("FieldsSecurity/GetUsersList?hospid=" + $scope.hospitalid + '&jobkey=' + $scope.selectedJob.jobKey).then(function (response) {
$scope.UsersList = (response.data);
GetFieldsList();
GetCategriesList();
GetPatientSheets();
$scope.HideLoading('slow');
})
}
How to show option.Brand.Name as the title of the select field without using java script and changing the ng-model?
<select ng-model="detail.BrandId" title="" class="form-control" disabled>
<option ng-repeat="option in mainCtrl.products" ng-selected="option.Id === detail.ProductId" ng-value="option.BrandId">{{option.Brand.Name}}</option>
</select>
AngularJS and select-options
Try using ng-options AngularJS ngOptions directive within select element itself. Then you don't need to add each option element yourself using ng-repeat.
Clarification
The title-attribute belongs to the select-element and will show if you hover over the select. You would like the title to reveal the current selected option? Did I understand you correctly?
How to show option.Brand.Name as the title of the select field
Curious, where this detail.ProductId comes from? Is the brand preselected by product-id (see your code)?
ng-selected="option.Id === detail.ProductId"
Solution space
Your requirements/restrictions are:
without using JavaScript (maybe because you can't change the sources)
without changing the ng-model (because you need there only the BrandId for some database-reasons)
So since the title of the select-element has no access to the options inside, the only way to set it is depending on the current selection, i.e. your detail.BrandId. So the title can only set dynamically (depending on the current selection) by using standard-angularJS means, as:
{{ expression }} expressions
{{ expression | filter }} array-filter
Expected behavior
The only scope-variable changed by selecting is specified within select's ng-model as detail.BrandId. This will be set when user selects an option to its property BrandId. When user selects between options they will be visible with ther BrandName as label. After selection this BrandName (label of the option) should be shown as title of the entire select element.
So we need to get from detail.BrandId (selected ng-model) to related options BrandName (as this should show as title).
Possible Solution
Only way is to use standard angular expressions/filters/array-indexing to get the whole option by the selected detail.BrandId (ng-model)
Then we can lookup the option.BrandName by this equation after selected detail.BrandId === option.BrandId
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope){
$scope.products = [
{Id: 0, name: 'Watson', brandId: 1, brandName:"IBM"},
{Id: 1, name: 'DB2', brandId: 1, brandName:"IBM"},
{Id: 2, name: 'Windows', brandId: 2, brandName: "Microsoft"},
{Id: 3, name: 'Office', brandId: 2, brandName: "Microsoft"}
];
$scope.detail = { ProductId: 3, BrandId: null };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body data-ng-app="app" data-ng-controller="mainCtrl">
<table border="1">
<tr>
<th>Product Id</th><th>Product Name</th><th>Choose Brand</th><th>Brand Id</th>
</tr>
<tr>
<td>{{detail.ProductId}}</td>
<td>{{ (products | filter: {Id: detail.ProductId})[0].name }}</td>
<td>
<select class="form-control"
ng-model="detail.BrandId"
ng-init="detail.BrandId = (products | filter: {Id: detail.ProductId})[0].brandId"
ng-options="o.brandId as ('['+ o.Id +'] '+ o.name +' : '+ o.brandName +' ('+ o.brandId +')') for o in products"
title="{{ (products | filter: {brandId: detail.BrandId})[0].brandName}}"
>
<!-- default option when not preset by detail.ProductId-->
<option value="">-- please choose brand --</option>
</select>
</td>
<td>{{detail.BrandId}}</td>
</tr>
</table>
<hr/>
<p>Product is predefined. So the brand is pre-selected by product. BUT: after brand is selected, the product-details do NOT change!</p>
Selected <strong>detail</strong>:
<pre ng-model="selected">{{detail | json}}</pre>
</body>
</html>
See also
For using ng-options, see also plunkr example.
You can register the selected option object in the ng-repeat parent scope by using as alias-expression provided by ng-repeat.
In your case you just need to do something like that:
<select ng-model="detail.BrandId"
title="{{options | selectedProductFilter : detail.ProductId}}"
class="form-control"
disabled>
<option ng-repeat="option in mainCtrl.products as options"
ng-selected="option.Id === detail.ProductId"
ng-value="option.BrandId">
{{option.Brand.Name}}
</option>
</select>
The options object will be available in your controller closure and you can display the title by using a custom filter.
angular.module("app").filter('selectedProductFilter',
function () {
return function (input, id) {
if (!input) return "";
let occurence = input.filter(function (x) {
return x.Id == id;
});
return occurence.length > 0 ? occurence[0].Brand.Name: "";
}
}
);
you need to do ng-change event in your select and call function in it that change the value of label text to the select value name. something like below
In Html
ng-change="changedValue(detail.BrandId)"
In JS
$scope.changedValue = function(item) {
//change label name here
}
fill ng-model by "option" not "option.BrandId"
then you can set title like this :
mainCtrl.products['ng-model-name'].Brand.Name
Here's how you could achive this:
(function () {
"use strict";
const app = angular.module("app", []);
app.controller("app.AppCtrl", $scope => {
$scope.selectedOption = null;
$scope.optionList = [{_id: 1, label: 'Option 1'}, {_id: 2, label: 'Option 2'}];
});
})();
body {
margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="app.AppCtrl">
<select title="{{selectedOption.label}}" class="form-control" ng-model="selectedOption">
<option ng-repeat="option in optionList" ng-value="option"> {{option.label}}</option>
</select>
</div>
Try using ng-init,
add ng-init to your select tag and put your object index value you want to be selected by default.
e.g.
Your code
<select ng-model="detail.BrandId" title="" class="form-control" disabled>
<option ng-repeat="option in mainCtrl.products" ng-selected="option.Id === detail.ProductId" ng-value="option.BrandId">{{option.Brand.Name}}</option>
</select>
adding following code (Suppose I want index 0 by index):
ng-init="detail.BrandId = option[0].Brand.Name"
It will look like this :
<select ng-model="detail.BrandId" ng-init="detail.BrandId = option[0].Brand.Name" title="" class="form-control" disabled>
<option ng-repeat="option in mainCtrl.products" ng-selected="option.Id === detail.ProductId" ng-value="option.BrandId">{{option.Brand.Name}}</option>
</select>
or Check these thread's
how to use ng-option to set default value of select element
How to set default value in ng-options
I have select tag which takes values from array like this
<select class="groupForArchive" ng-model="selected.country">
<option ng-selected= "{{country == selected.country}}" ng-repeat="country in countrynList" value={{country}}> {{ country.name }} </option>
</select>
when I am deleting element from array(countryList) I am setting new value to this tag like this $scope.selected.country = newValue, but in select box I am getting free space like in this pictures.
before delete country from list
after delete country from list
and when I am taking select tag's ng-model I am getting correct object but I can not see it in my select box and I don't know which item is selected.
P.S newValue is array's another item(item from countrynList)
How can I fix it ?
Update AngularJS library to latest version and make changes, presented below:
angular.module('app', []).controller('ctrl', function($scope){
$scope.countrynList = [
{name:'USA'}, {name:'Spain'}, {name:'France'}, {name:'Germany'}
]
$scope.selected = {country: $scope.countrynList[0]};
$scope.Delete = function(){
var index = $scope.countrynList.indexOf($scope.selected.country);
$scope.countrynList.splice(index, 1);
$scope.selected.country = $scope.countrynList[0];
}
})
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<select class="groupForArchive" ng-model="selected.country">
<option ng-repeat="country in countrynList" ng-value='country'>
{{country.name}}
</option>
</select>
{{selected.country}}
<br>
<input type='button' ng-click='Delete()' value='Delete First'/>
</div>
I am using a select combobox with dynamic values from an OData response. Beccause of this I need to identify the 'highest' existing period in my response and set the selectedattribute for the relevant option item.
This selectis used as a period filter. That's why I also added an entry for 'all' periods. This can be removed in the sample and makes no difference in the behaviour.
Angular seems to evaluate the conditions etc. correct, so the element which should be selected gets the attribute selected="selected" and ng-select="true".
Nevertheless the browser selects '' by default rather than the selected element. Even if I remove the option for all periods, the browser takes the 'empty' element and not the element with the selectedattribute.
I checked other answer so similiar questions, but none of them worked and many reference ng-options instead of ng-repeat.
More information
I am using AngularJS v1.4.9 and Chrome 48.0.2564.103 m
I am using a rather large OData response in JSON format as data source, so I'd need to rewrite the code here to provide an executable example.
I'll do this if it's necesary or required.
For other reasons, which I don't want to discuss here I cannot use ng-options, so please don't suggest this.
HTML snippet - commented and indented afterwards
The other logic for sorting, ordering etc. is working fine.
<select class="semester-selection" ng-model="selectedPeriod.Period_Nav.PeriodName">
<!-- This 'empty' option can be removed. ng-selected won't work then either -->
<option ng-selected="false" value=""><Alle></option>
<option ng-selected="{{examResult.Period == getHighestPeriod()}}"
ng-repeat="examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period'"
value="{{examResult.Period_Nav.PeriodName}}">
<!-- Debug information -->
{{examResult.Period_Nav.PeriodName}}
{{examResult.Period == getHighestPeriod()}}
{{getHighestPeriod()}}
</option>
</select>
Generated HTML via Angular JS
The generated code looks okay, because selected="selected" and ng-select="true" as in there for the desired element.
<select class="semester-selection ng-pristine ng-valid ng-touched"
ng-model="selectedPeriod.Period_Nav.PeriodName">
<option value=""><Alle></option>
<!-- ngRepeat: examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period' -->
<option selected="selected" ng-selected="true" ng-repeat="examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period'" value="WiSe 2011/12" class="ng-binding ng-scope">
WiSe 2011/12
true
15014000
</option>
<!-- end ngRepeat: examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period' -->
<option ng-selected="false" ng-repeat="examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period'" value="SoSe 2007" class="ng-binding ng-scope">
SoSe 2007
false
15014000
</option><!-- end ngRepeat: examResult in examResultData.results | uniquePeriod:'Period' | orderBy:'-Period' -->
</select>
Result in the browser
When I open the page in the browser the combobox has still not the selected value as active, but the first or empty one.
Reduced sample for testing / fiddling around
Oh. This reduced sample works, so I need to find the issue somewhere else in the code.
var app = angular.module('ExamResultList', [ ]);
app.controller('ExamResultController', ['$scope', function ($scope) {
// Simplified sample data -> this can contain 'duplicates'
$scope.examResultData = [
{PeriodName:'WiSe 15/16', Period:8}, // fake OData OrderBy -> Highest period is the first elem
{PeriodName:'SoSe 12', Period:1},
{PeriodName:'WiSe 12/13', Period:2},
{PeriodName:'WiSe 12/13', Period:2},
{PeriodName:'WiSe 12/13', Period:2},
{PeriodName:'SoSe 13', Period:3},
{PeriodName:'WiSe 13/14', Period:4},
{PeriodName:'SoSe 14', Period:5},
{PeriodName:'WiSe 14/15', Period:6},
{PeriodName:'SoSe 15', Period:7}
];
$scope.highestPeriod = 0;
$scope.getHighestPeriod = function() {
// first element has the highest period, because the OData request has a orderby expression
return $scope.examResultData[0].Period;
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExamResultList" id="examResultListWrapper">
<div ng-controller="ExamResultController as ExamResCtrl" id="examResultList">
<select class="semester-selection">
<option ng-selected="false" value=""><Alle></option>
<option ng-selected="{{examResult.Period == getHighestPeriod()}}"
ng-repeat="examResult in examResultData"
value="{{examResult.PeriodName}}">
{{examResult.PeriodName}}
<!-- Debug info
{{examResult.Period == getHighestPeriod()}}
{{getHighestPeriod()}}
-->
</option>
</select>
</div>
</div>
ng-selected does not take expression brackets. Use
ng-selected="examResult.Period == getHighestPeriod()"
I am trying to implement a custom directive using angular js's custom directive but first drop-down goes unselected and it gives me error saying "Error: 10 $digest() iteration reached. Aborting!
Watcher fired in the last 5 iterations:
index.html goes here -
<!doctype html>
<meta charset="utf-8">
<html>
<head>
<title>Adnan Try</title>
<script type="text/javascript" src="../js/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="cascading.js"></script>
</head>
<body>
<div ng-app="cascading">
<div ng-controller="CascadingCtrl">
<cascading countries = "{
'India': {
'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
},
'USA': {
'Alabama': ['Montgomery', 'Birmingham'],
'California': ['Sacramento', 'Fremont'],
'Illinois': ['Springfield', 'Chicago']
},
'Australia': {
'New South Wales': ['Sydney'],
'Victoria': ['Melbourne']
}
}"
></cascading>
</div>
</div>
</body>
</html>
cascading.js file is
angular.module('cascading', [])
.controller('CascadingCtrl', ['$scope', function($scope) {
}])
.directive('cascading', function() {
return {
restrict : "E",
scope : {
countries : '='
},
templateUrl: 'cascading.html',
link: function($scope, $element, $attribute) {
}
};
});
and cascading.html is here
<div>
Country:
<select id="country" ng-model="states" ng-options="country for (country, states) in countries">
<option value=''>Select</option>
</select>
</div>
<div>
States: <select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
<option value=''>Select</option></select>
</div>
<div>
City: <select id="city" ng-disabled="!cities" ng-model="city" ng-options="city for city in cities">
<option value=''>Select</option></select>
</div>
My hunch is i m doing something wrong in cascading.html that leaves angular js in clue less mode about two way binding.
EDIT
plnkr link is - http://plnkr.co/edit/osqXgK6CB1zpcMPfHTO3?p=preview
I found the problem.. Just used recent AngularJS and it seems everything is just working.. I used https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js and everything is just working.
PS:
Thanks #JB Nizet for your comment about.