I use the following select. Currently, I get empty options in my select on start. To avoid these empty options in angularJS, I want to preselect the first option in the select. But It do not work. I get an 'Cannot read property 'conditions' of undefined'. Thank you for your tips!
HTML
<select ng-show="rule.field=='Cardiology'" ng-options="c.name as c.name for c in conditions" ng-model="rule.condition" class="form-control input-sm selectCondition"></select>
JS
scope.conditions = [{
name : 'contains',
}, {
name : 'doesn´t contain',
}];
$scope.conditions = {type : $scope.conditions[0].value};
Bind value in model to get selected.
Try like this
$scope.rule.condition=$scope.conditions[0].value;
Related
Trying to filter a table using a select and ng-options but not successful. I've got a plunker showing the problem. Anyone who can see what is going on?
http://plnkr.co/edit/WlojiFw26gqUoEDXOeQd?p=preview
My Select:
<select class="form-control"
st-search="code"
st-input-event="change"
st-delay="0"
ng-model="selectedStatusFilter"
ng-options="f.code as f.text for f in codeOptions">
</select>
My options:
$scope.codeOptions = [{
'text': 'On',
'code': 'On'
}, {
'text': 'Off',
'code': 'Off'
}, {
'text': 'Cat',
'code': 'Cat'
}, {
'text': 'All',
'code': ''
}]
Typical item in collection:
code : "On"
firstName : "Laurent"
id : 9
lastName : "Renard"
So what I'm hoping to happens is that the value of the Select gets interperated as a filter on the code property of the items in collection. So when "On" is selected only items with code : 'On' are shown, and with All selected because the value there is "" we should see all items.
Using Angular version 1.6.4
Using Smart-Table 2.1.8
As alternative way you can use <option> and ng-repeat without any ng-model
<select class="form-control" st-search="code">
<option ng-repeat="f in codeOptions"
ng-selected="codeOptions.indexOf(f) == 3"
value="{{f.code}}">{{f.text}}</option>
</select>
Demo Plunker
In the smart filter documentation there is a way defined on how to do this, Refer the link Smart Table Filtering, So in this link its tells us to use the attribute st-set-filter on the smart table declarartion element. Another thing is, in select using ng-options we will get the datatype included in the ng-model of the select element, to remove this, you can use track by f.code, So the HTML changes are:
<section st-table="displayedCollection" st-safe-src="rowCollection" st-set-filter="myCustomFilter">
<select class="form-control"
st-search="code"
st-input-event="change"
st-delay="0"
ng-model="selectedStatusFilter"
ng-options="f.code as f.text for f in codeOptions track by f.code"></select>
{{displayedCollection}}
<table class="table table-striped">
<thead>
<tr>
The JS contains a filter declaration taken from the docs.
app.filter('myCustomFilter', function($filter){
return function(input, predicate){
console.log(input, predicate);
return $filter('filter')(input, predicate, true);
}
});
Finally below is a demo for the same.
Plunkr Demo
Please let me know if you face any issues!
I have the variable:
$scope.rolesData = [{id : '1', name : 'user'}, {id : '2', name : 'superuser'},{id : '3', name : 'admin'}];
And I got from a DB an user object with integer value, which tells me what is the role. It is from 1 to 3. user.userRole is 1,2 or 3.
$scope.users = adminUserSvc.query(); //From DB
Everything is workin fine in select:
<tr ng-repeat="user in users">
...
<select class="form-control" ng-model="user.userRole" ng-options="role.id as role.name for role in rolesData">
</select>
But I wonder how I can show the same inside the {{}}? If I know that user.userRole is giving me id 1, how the heck I'll get the value of name?
This is inside the ngRepeat:
<div ng-hide="editingUsers[user.userId]">{{rolesDataSOMETHING??}}</div>
Ok you can use this:
{{(rolesData | filter:{id:user.userRole})[0].name}}
At first it filters the rolesData Object - then gets the first object (it should only be one because of the filter) with [0].
Old Answer (to old question):
You just need to save the right 'thing' in your model by changing your ng-options!
ng-options="role as role.name for role in rolesData"
This will save the whole role object {id : '1', name : 'user'} in your user.userRole model, to output the name just use {{user.userRole.name}}
There is no need for ngRepeat here.
You could use lodash (http://lodash.com) to find the element you are looking for. You'd probably want to put that in a function on your controller. Something like
$scope.getName = function(id) {
var i = _.findIndex($scope.rolesData, { id: id });
return $scope.rolesData[i].name;
}
And then in your template, you could reference this in the brackets like:
<div ng-hide="edingUsers[user.userId]">{{getName(user.userRole)}}
I am developing a mobile application where there is a view where there are two select tags first select tag consist of options of teams & in the second select tag there are forms associated with team Ids that user select in first select tag. I want to filter the data of second select tag as per the team Id of first select tag on ng-change event.
For the first select tag i have populated as follows:
<select ng-change="showForms(name.id)" ng-model="name" ng-options="f.name for f in devices track by f.id"></select>
my second select tag is this:
<select ><option ng-repeat="formEach in forms" id="{{formEach.Formid}}">{{formEach.Formname}}</option></select>
Here my concern is i dont want to show any forms that are present inside the forms array initially when user is about to select team. When user selects team, the forms with the selected teams id associated should be shown in the second select tag. How the filtering will be occur or is it on same page or through controller. I am familiar with PHP but task is in angular & am new to angularJS.
Thanks in advance for quick response.
Sample data is this:
devices = [
{id : X001, name :'Team 1', icon: 'ion-document-text', status : 'Owner', color : 'brown'},
{id : X002, name :'Team 2', icon: 'ion-document-text', status : 'Owner', color : 'yellow'},
{id : X003, name :'Team 3', icon: 'ion-document-text', status : 'Owner', color : 'black'}
];
forms data is this:
forms= [
{id : AS001, teamid: X001, formname :'Feam 1', icon: 'ion-document-text', status : 'Active'},
{id : AS002, teamid: X001, formname :'Feam 2', icon: 'ion-document-text', status : 'Draft'},
{id : AS003, teamid: X003, formname :'Feam 3', icon: 'ion-document-text', status : 'Draft'}
];
controller code is this: (controller logic is not written as am confused of populating the data as am filling the array at the time of navigation to this view)
$scope.showForms = function(teamId){
}
You can do this by simply following below trick. I've used the same in one of my project.
<select class="custom-select" ng-model="teamName" data-ng-options="f.id as f.name for f in devices" ng-change="updateTeamObject($index, teamName);">
<option value="">Select Team</option>
</select>
and in your second select, just use.
<select class="custom-select" ng-model="deviceForms" data-ng-options="o.id as o.formname for o in forms | filter:{teamid:teamName}">
<option value="">Your team data</option>
</select>
Fiddle
Try this:
<div ng-app>
<div ng-controller="TodoCtrl">
<select ng-change="showForms(name.id)" ng-model="name" ng-options="f.name for f in devices"></select>
<select ng-model="selected">
<option ng-repeat="formEach in forms| filter:{teamid:name.id }" id="{{formEach.id}}">{{formEach.formname}}</option>
</select>
</div>
</div>
Demo: http://jsfiddle.net/U3pVM/15890/
Explanation:
Important part is
ng-repeat="formEach in forms| filter:{teamid:name.id }"
Note how the filter is used. Specify the property (i.e. teamid in your case) where you want the filter to be applied. Since model name stores the selection, you can filter the next select dropdown by using name.id . For testing, just select the last option in the first select dropdown in the demo, the next dropdown will have the filtered results.
You can achieve it by pushing the items you want in the second select tag's array at the time of ng-change event of the first tag
In the ng-change function, push items into the array like this in the controller,
$scope.specifications = [];
angular.forEach($scope.allSpecifications, function(spec) {
if(spec.id == id) {
$scope.specifications.push(spec)
}
});
In Html use that array
<select ng-change="showSpec(car.id)" ng-init="car = carsList[0]" ng-model="car" ng-options="car.name for car in carsList"></select>
<select>
<option ng-repeat="primitive in specifications" id="{{primitive.id}}">{{primitive.name}}</option>
</select>
I have done one plunker with a sample JSON,
Working Plunker
Hope this helps!
I have an object as below. I have to display this as a drop-down:
var list = [{id:4,name:"abc"},{id:600,name:"def"},{id:200,name:"xyz"}]
In my controller I have a variable that carries a value. This value decided which of the above three items in the array will be selected by default in the drop-down:
$scope.object.setDefault = 600;
When I create a drop-down form item as below:
<select ng-model="object.setDefault" ng-options="r.name for r in list">
I face two problems:
the list is generated as
<option value="0">abc</option>
<option value="1">def</option>
<option value="2">xyz</option>
instead of
<option value="4">abc</option>
<option value="600">def</option>
<option value="200">xyz</option>
No option gets selected by default even though i have ng-model="object.setDefault"
Problem 1:
The generated HTML you're getting is normal. Apparently it's a feature of Angular to be able to use any kind of object as value for a select. Angular does the mapping between the HTML option-value and the value in the ng-model.
Also see Umur's comment in this question: How do I set the value property in AngularJS' ng-options?
Problem 2:
Make sure you're using the following ng-options:
<select ng-model="object.item" ng-options="item.id as item.name for item in list" />
And put this in your controller to select a default value:
object.item = 4
When you use ng-options to populate a select list, it uses the entire object as the selected value, not just the single value you see in the select list. So in your case, you'd need to set
$scope.object.setDefault = {
id:600,
name:"def"
};
or
$scope.object.setDefault = $scope.selectItems[1];
I also recommend just outputting the value of $scope.object.setDefault in your template to see what I'm talking about getting selected.
<pre>{{object.setDefault}}</pre>
In View
<select ng-model="boxmodel"><option ng-repeat="lst in list" value="{{lst.id}}">{{lst.name}}</option></select>
JS:
In side controller
$scope.boxModel = 600;
You can do it with following code(track by),
<select ng-model="modelName" ng-options="data.name for data in list track by data.id" ></select>
This is an old question and you might have got the answer already.
My plnkr explains on my approach to accomplish selecting a default dropdown value. Basically, I have a service which would return the dropdown values [hard coded to test]. I was not able to select the value by default and almost spend a day and finally figured out that I should have set $scope.proofGroupId = "47"; instead of $scope.proofGroupId = 47; in the script.js file. It was my bad and I did not notice that I was setting an integer 47 instead of the string "47". I retained the plnkr as it is just in case if some one would like to see. Hopefully, this would help some one.
<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>
This would get you desired result Dude :) Cheers
Some of the scenarios, object.item would not be loaded or will be undefined.
Use ng-init
<select ng-init="object.item=2" ng-model="object.item"
ng-options="item.id as item.name for item in list"
$scope.item = {
"id": "3",
"name": "ALL",
};
$scope.CategoryLst = [
{ id: '1', name: 'MD' },
{ id: '2', name: 'CRNA' },
{ id: '3', name: 'ALL' }];
<select ng-model="item.id" ng-selected="3" ng-options="i.id as i.name for i in CategoryLst"></select>
we should use name value pair binding values into dropdown.see the
code for more details
function myCtrl($scope) {
$scope.statusTaskList = [
{ name: 'Open', value: '1' },
{ name: 'In Progress', value: '2' },
{ name: 'Complete', value: '3' },
{ name: 'Deleted', value: '4' },
];
$scope.atcStatusTasks = $scope.statusTaskList[0]; // 0 -> Open
}
<select ng-model="atcStatusTasks" ng-options="s.name for s in statusTaskList"></select>
I could help you out with the html:
<option value="">abc</option>
instead of
<option value="4">abc</option>
to set abc as the default value.
I have an javascript object as follows in my controller:
$scope.options = [
{
"actualValue": "age",
"displayValue": "Age"
},
{
"actualValue": "maiden",
"displayValue": "Maiden Name"
}
];
Now, I am displaying a select element in which the options of the element will be the values in the "displayValue" property written above:
<select ng-options="entry.displayValue for entry in options" ng-model="biodata">
<options>-- Select a BioData Option --</option>
</select>
Now, my problem is that the ng-model for the select element above when the user select a value from the dropdown is the "displayValue" property. I wish that the ng-model be the "actualValue" property.
How can I achieve this?
<select ng-options="entry.actualValue as entry.displayValue for entry in options"></select>
Fiddle: http://jsfiddle.net/rzV65/
Already answered here: How do I set the value property in AngularJS' ng-options?