I'm trying to use ng-options to select a Role.
I have Role objects that look like this:
{
Id: 'someRoleId',
Name: 'someRoleName
}
and then a list of select options that come from the server like this:
{
Value: 'someRoleId'
Text: 'someRoleName',
}
Currently I have this select field bound to the Role property of party on the controller.
<select ng-model="party.Role" ng-options="o as o.Text for o in options.RoleOptions track by o.Value" />
It correctly translates the options, but the selected value (o) doesn't have matching properties, so the binding doesn't work. Is there any way to map the Value to Id, and Text to Name using ng-options?
Thanks!
Try this..
Markup:
<select ng-model="role" ng-options="o as o.Text for o in options.RoleOptions track by o.Value" ng-model-options="{getterSetter:true}"/>
Controller:
var _role;
$scope.role = function (val) {
if (angular.isDefined(val)) { //setter
_role = {
'Id': val.Value,
'Name': val.Text
}
} else {
//getter
return {
'Value': _role.Id,
'Text': _role.Name
};
}
}
Related
I'm using AngularJS on a project and I need to implement a select box with a filter to a nested property. My object (I have an array of those and I'm iterating through them via ng-repeat) has a structure similar to this:
{
id: 1,
name: 'Example',
groups: [
{ id: 1, name: 'Group 1' },
{ id: 2, name: 'Group 2' }
]
}
I need to filter the group ID of the elements, and after searching I've come up with two ways to do it:
1.
| filter: { $: { id: search.item_id } }
Which has these problems:
Apparently it searches for any nested properties named ID, so if I have more than one object inside my main object, with a property called ID too, it would add it to the filter. Example:
{
id: 2,
name: 'Example 2',
groups: [
{ id: 1, name: 'Group 1' },
{ id: 2, name: 'Group 2' }
],
categories: [
{ id: 1, name: 'Cat 1' },
{ id: 2, name: 'Cat 2' }
]
}
Filtering for ID 1 would select not only group with ID 1, but category with ID 1 too.
Also, with this method, even before setting the filter (search.item_id model is null), objects without groups are being filtered and not appearing in the list. These objects are like this:
{
id: 3,
name: 'Example 3',
groups: []
}
and the other way is:
2.
| filter: { groups: [{ id: search.item_id }] }
In this case, the problem is that it simply doesn't work, it filters everything, leaving the list blank, no matter if it's set or which option is selected.
How can I make it work? I've been searching and couldn't find anything about this. Filtering nested properties is (or should be) a very basic thing.
Update:
So, xtx first solution kinda did it, but only if I use input text or number, but I need to use a select box (more specifically uib-dropdown, but working in a regular select is the next step). My select box is looking like this:
<select name="filter_classes_groups_test" ng-model="search.group_id">
<option val="group.id" ng-repeat="group in classesGroups">{{ group.name }}</option>
</select>
When I interact with it, nothing happens.
If creating a custom filter works for you, here is how you can do that:
app.filter('groupsFilter', function() {
return function(input, groupId) {
var out = [];
if (!groupId || isNaN(parseInt(groupId))) {
return input;
}
angular.forEach(input, function(item) {
if (item.groups && angular.isArray(item.groups)) {
angular.forEach(item.groups, function (group) {
if (group.id === parseInt(groupId)) {
out.push(item);
}
});
}
});
return out;
}
});
As you can see, the custom filter has name groupsFilter, and takes group id to search for as a parameter. The filter can be applied like this:
<div ng-repeat="item in data | groupsFilter:search.item_id">
...
</div>
UPDATE:
Instead of creating a custom filter, you can just create a function that implements filtering logic, in scope like this:
$scope.groupsFilterLocal = function(value) {
if (!$scope.search.item_id || isNaN(parseInt($scope.search.item_id))) {
return true;
}
if (!value || !value.groups || !angular.isArray(value.groups)) {
return false;
}
for (var i = 0; i < value.groups.length; i++) {
if (value.groups[i].id === parseInt($scope.search.item_id)) {
return true;
}
}
return false;
};
and then apply it using build-in filter like this:
<div ng-repeat="item in data | filter:groupsFilterLocal ">
...
</div>
Notice that in this case you can't pass the value to search for (search.item_id) into your function groupsFilterLocal like it is done for the custom filter groupsFilter above. So groupsFilterLocal has to access search.item_id directly
UPDATE 2: How to create a select properly
The reason why the filter is not applied when you pick a group in your dropdown, is in the way how you defined the select. Instead of the id of the selected group, search.group_id gets assigned group's name.
Try defining the select like shown below:
<select name="filter_classes_groups_test" ng-model="search.item_id" ng-options="group.id as group.name for group in classesGroups">
<option value="">-- Choose Group --</option>
</select>
To ensure that search.item_id gets id of the group that is selected (and not its name), try temporarily adding {{ search.item_id }} somewhere in your template.
Here is my data
This.dynamicCmb = [{
id: 1,
label: 'aLabel',
subItem: ['aSubItem1','aSubItem2','aSubItem3']
}, {
id: 2,
label: 'bLabel',
subItem: [ 'bSubItem' ]
}];
I want to display 'subItem' data depending on the value I give i.e, either id or label. if I search any one it should display value.
<input type="text" ng-model="vm.selectedColumn" /> //Textbox to take either id or name value
<input type="button" value="Get" ng-click="GetCmbValue()" /> //On click of button it should load dropdown
<select ng-options="item.name for item in vm.selectedColumn.subItem" ng-model="vm.selected"></select>
.js file
This.GetCmbValue = function () {
// I should load drop down value here
};
for eg: if I give '1' in textbox then subItem of '1' should display. If I give 'alabel' in textbox then also subItem of 'alabel' should display. It should search either on id or label whatever I give. Please help me to do this
You can attach filter to your ngOption. So that every time you type value in textbox, it will filter data accordingly.
We bind the output of textbox to the filter.
.js file
app.filter('itemFilter', function() {
return function(input,val) {
var out = new Array();
angular.forEach(input, function(item) {
if (item.id == val || item.label == val) {
out = out.concat(item.subItem);
}
});
return out;
};
});
HTML File
<input type="text" data-ng-model="val">
<select data-ng-options="item for item in dynamicCmb | itemFilter : val" data-ng-model="selected"></select>
change your select code by this
<select ng-options="item.name for item in vm.selectedColumn.subItem|filter:{Id:vm.selectedColumn}" ng-model="vm.selected"></select>
var phoneIdentification = {
'phoneFiled': {
'label': 'Enter Phone',
'regex': '[0-9]{11,12}'
}
};
var mailIdentification = {
'mailField': {
'label': 'Enter Email',
'regex': '^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$'
},
'passwordField': {
'label': 'Enter Password'
}
};
I have for example this two data. Default I render first one:
$scope.data.dataSource = phoneIdentification;
And Than in view:
<div ng-repeat="(key, item) in dataSource">
<label>{{item.label}}</label>
<input type="text" ng-if="item.regex" ng-pattern="{{item.regex}}"/>
</div>
And I have button also, on click I changed dataSource, I'm setting new value from controller:
$scope.data.dataSource = mailIdentification;
View is updating but, problem is validations, It doesn't update input's Reg-exes>
How it is possible to re-render whole view?
You are missing the regex property in the passwordField field in the mailIdentification object. You need it because you are accessing it in the ng-repeat directive.
Your mailIdentification object should look like this:
var mailIdentification = {
...
'passwordField': {
'label': 'Enter Password',
'regex': `some regex here`
}
};
My angular select isn't binding. I can tell the value is correct, but the select isn't updated. Why is not binding if the value is there?
<div ng-controller="MyController" ng-app>
<select class="form-control" ng-model="colorId"ng-options="color.id as color.name for color in colorList">
<option value="">--Select a Color--</option>
</select>
<input type="button" value="submit" ng-click="Select()"></input>
function MyController($scope) {
$scope.colorList = [{
id: '1',
name: 'red'
}, {
id: '2',
name: 'blue'
}, {
id: '3',
name: 'green'
}];
var colorId = 3;
$scope.colorId = colorId;
alert($scope.colorId);
$scope.Select = function () {
var colorId = 2;
$scope.colorId = colorId;
}
}
Here is a fiddle:
http://jsfiddle.net/ky5F4/23/
you need to change the id to a string when doing Select
$scope.Select = function () {
console.log('select fired');
var colorId = 1;
$scope.mySelection.colorId = colorId + "";
}
http://jsfiddle.net/bxkwfo0s/2/
next you should use a property of an object rather than just a scope variable, this will ensure proper model binding
ng-model="mySelection.colorId"
where the object could be something simple
$scope.mySelection = {colorId : colorId };
There are two errors with your code:
You are using colorList as your model in ng-options, but you are calling it datasets in your controller.
You use strings for the id, but set the $scope.colorId to a number.
Here is an updated fiddle changing ids to numbers and changing $scope.datasets to $scope.colorList
function MyController($scope) {
$scope.colorList = [{
id: 1,
name: 'red'
}, {
id: 2,
name: 'blue'
}, {
id: 3,
name: 'green'
}];
var colorId = 3;
$scope.colorId = colorId;
alert($scope.colorId);
$scope.Select = function () {
var colorId = 2;
$scope.colorId = colorId;
}
}
Consider making your ng-model be an object, specifically one of the objects that are already in your $scope.colorList. If you do that you should be able to avoid the post-processing you're doing in the click handler.
So your select will look like this:
<select class="form-control" ng-model="selectedColor"
ng-options="color.name for color in colorList"></select>
One gotcha is that if you have an object in your controller that looks JUST LIKE your red object, like$scope.selectedColorObj = { id : '1', name:'red' } and set the select's ng-model to that option, it won't work. Angular will see that you're setting to the ng-model to an object that's not actually in your data source and add an extra option with value="?", so I use $filter in this case to grab the matching member of the array:
$scope.colorId = '3';
$scope.selectedColor = $filter('filter')( $scope.colorList,{ id: $scope.colorId})[0];
See http://jsfiddle.net/ky5F4/92/
I am using this code in my controller:
$scope.$watch('option.selectedPageType', function () {
if ($scope.isNumber($scope.option.selectedPageType)) {
localStorageService.add('selectedPageType', $scope.option.selectedPageType);
}
})
getPageTypes: function ($scope) {
$scope.option.pageTypes = [
{ id: 0, type: 'Edit Basic' },
{ id: 1, type: 'Edit Standard' },
{ id: 2, type: 'Report' }
];
$scope.option.selectedPageType = parseInt(localStorageService.get('selectedPageType'));
},
and in my HTML:
<select data-ng-model="option.selectedPageType"
data-ng-options="item.id as item.type for item in option.pageTypes">
<option style="display: none" value="">Select Page Type</option>
</select>
Instead of using the "Select Page Type" option. How can I make it so my code defaults to the value in local storage or if there is nothing there then to one of the values I have in my option.pageTypes list ?
Have your localStorageService return null if there is nothing stored. If it does exist, have the service return the integer
Then in controller:
/* assume want first item in array */
$scope.option.selectedPageType = localStorageService.get('selectedPageType') || $scope.option.pageTypes[0].id
Try using ng-init on the <select ...>:
<select data-ng-model="option.selectedPageType"
data-ng-options="item.id as item.type for item in option.pageTypes"
data-ng-init="option.selectedPageType=DEFAULT_VALUE">
See this fiddle: http://jsfiddle.net/CaeUs/5/