<li class="list-group-item" ng-repeat="entity in displayedProjectRoles">
<div>
<strong>Role: </strong>
<select
ng-model="project.role"
ng-options="option as option.name for option in project_role"
ng-required="true"
id="project_role"
class="form-control">
</select>
</div>
</li>
How can I set the value of model project.role based on the value on entity.role in the ng-repeat? I tried ng-selected or even using entity.role in the ng-model but it's not working properly.
this is the data in displayed Project Roles
[
{
"empid": 2,
"role": "employee"
},
{
"empid": 1,
"role": "pm"
}
]
and in the project_role
[
{
"id": 1,
"name": "employee"
},
{
"id": 2,
"name": "pm"
}
]
So basically the value of role in displayedProjectRoles matches with the name in project_role
This is a good example of angular select.
Essentially the ng-model for the select has to match the ng-option value to bind. In your example project.role would have to be exactly equal to option from your ng-options. Note this is type specific so had it been
option.id as option.name for option in project_role
and option.id == 1 then project.role == '1' will not bind
Related
In AngularJS - I have dropdown code as below. type.entityTypeId field is a long data type. The dropdown works fine in the create page and able to insert the 'type.entityTypeId' field into the DB.
But it does not work while reloading the same data in the Edit page with same code.
Is this problem because I have the datatype as Long ?
I have other drop downs working fine in which I have all String data type.
<div class="form-group">
<label class="control-label col-md-2 required">ENTITY TYPE</label>
<div class="col-md-2">
<select name="entityType" class="form-control" ng-model="entity.entityType.entityTypeId"
required="required">
<option value="">Please select</option>
<option ng-repeat="type in entityTypes" value="{{type.entityTypeId}}">{{type.entityTypeName}}</option>
</select>
</div>
<span style="color: red" ng-show="entityAddForm.entityType.$invalid"> <span
ng-show="entityAddForm.entityType.$error.required">Entity type is required.</span>
</span>
</div>
Updated:
This is a json used to load the drop down data. And you can see the entityTypeId is a number. In other cases it works if the id is a String.
[
{
entityTypeId: 3,
entityTypeName: "Branch of Legal Entity"
},
{
entityTypeId: 1,
entityTypeName: "Legal Entity"
},
{
entityTypeId: 2,
entityTypeName: "Notional Entity"
}
]
As per the documentation at: https://docs.angularjs.org/api/ng/directive/select
It looks like you do need to use a String at the moment.
Using numbers should not be an issue. I know that the documentation only uses string, but I'm able to use the same using number.
<div ng-app="myApp" ng-controller="myController">
<select ng-model="entity.selected">
<option value="{{ent.entityTypeId}}" ng-repeat="ent in entityTypes">{{ent.entityTypeName}}</option>
</select>
Selected entity id {{entity.selected}}
</div>
angular.module("myApp", [])
.controller("myController", ["$scope", function ($scope) {
$scope.entityTypes = [{
entityTypeId: 3,
entityTypeName: "Branch of Legal Entity"
}, {
entityTypeId: 1,
entityTypeName: "Legal Entity"
}, {
entityTypeId: 2,
entityTypeName: "Notional Entity"
}];
$scope.entity = {
selected: 3
};
}]);
JSFiddle
I'm using AngularJS to list and filter a task board. I'm also using unique to remove repeated strings in ng-options.
When I load the page, angular is listing well all json, but when I try to use <select> to filter contents, it returns me only 1 result.
For example: In json, I have 2 arrays that have Feb. If I choose Feb on <select>, it only returns me 1 result instead of 2. What am I doing wrong?
html:
<body ng-controller="ListTask">
<div>
<select bg-model="categoryFilter" ng-options="task.category for task in tasks | unique: 'category'">
<option value="">category</option>
</select>
<select ng-model="statusFilter" ng-options="task.status for task in tasks | unique: 'status'">
<option value="">status</option>
</select>
<select ng-model="monthFilter" ng-options="task.month for task in tasks | unique: 'month'">
<option value="">month</option>
</select>
</div>
<div>
<li ng-repeat="tasks in task | filter: categoryFilter | filter: statusFilter | filter: monthFilter">
<p>{{task.title}}</p>
<small>{{task.month}} {{task.category}}</small>
</li>
</div>
</body>
json:
[
{
"title": "Title 1",
"status": "open",
"month": "Feb",
"category": "Cat 1"
},
{
"title": "Title 2",
"status": "closed",
"month": "Feb",
"category": "Cat 2"
},
{
"title": "Title 3",
"status": "delayed",
"month": "Mar",
"category": "Cat 1"
},
{
"title": "Title 4",
"status": "closed",
"month": "Mar",
"category": "Cat 3"
}
]
controller:
var myApp = angular.module('myApp', ['ui.utils']);
myApp.controller('ListTask', ['$scope', '$http', function($scope, $http){
$http.get('/json/tasks.json').success(function(data){
$scope.tasks = data;
});
}]);
EDIT>>>>>>>>
Another problem is when I fill more than 1 <select>, it returns me no results :(
The thing is that the model monthFilter when month is selected looks like this:
{"title":"Title 1","status":"open","month":"Feb","category":"Cat 1"}
So when you use filter: monthFilter it naturally matches only one record.
To fix it your filtering expression should look like this:
ng-repeat="task in tasks | filter: {category: categoryFilter.category, month: monthFilter.month, status: statusFilter.status}"
Above solution is pretty verbose though. Much better way to handle filtering would be to have only one filter model with properties for month, status and category:
<div>
<select ng-model="filter.category"
ng-change="clear('category')"
ng-options="task.category as task.category for task in tasks | unique: 'category'">
<option value="">category</option>
</select>
<select ng-model="filter.status"
ng-change="clear('status')"
ng-options="task.status as task.status for task in tasks | unique: 'status'">
<option value="">status</option>
</select>
<select ng-model="filter.month"
ng-change="clear('month')"
ng-options="task.month as task.month for task in tasks | unique: 'month'">
<option value="">month</option>
</select>
{{filter}}
</div>
<div>
<li ng-repeat="task in tasks | filter: filter">
<p>{{task.title}}</p>
<small>{{task.month}} {{task.category}}</small>
</li>
</div>
There is only one more thing to take care of. When you select value from selectbox it filter well. However if you want to clear selection it will not filter anything, because filter model in this case will look like this when nothing is selected:
{month: null}
To handle this situation I added ngChange directive to remove null values:
$scope.clear = function(key) {
if ($scope.filter[key] === null) {
delete $scope.filter[key];
}
};
Demo: http://plnkr.co/edit/eE9TgjSPjcSgBnCWiMTS?p=preview
I have a complex object like this
listItems = [
{ "id": 1, "name": "myname1" },
{ "id": 2, "name": "myname2" },
{ "id": 3, "name": "myname3" }
];
I want to create options from above listItems like this
<select>
<option value="1">myname1</option>
<option value="2">myname2</option>
<option value="3">myname3</option>
</select>
I have used this angularjs code, its generating the correct html code but whatever I select in dropdown is not shown inside the select box
<select ng-model="iList" ng-options="item.id as item.name for item in listItems track by item.id" />
Assuming listItems is in the $scope
<select ng-options="item.id as item.name for item in listItems"></select>
Can any body help me with sample code?
I want to select country with AngularJS ui select2 and upon select, the corresponding state is loaded on a different select2 for state. And the country and state are located in a JSON data. The state has a Country Id.
Something like the documentation says? Assuming that you have an object data in your scope.
Data structure
{
"countries": [
{
"id": 1,
"name": "US",
"states": [
{"id": 1, "name"="CA"}
{"id": 2, "name"="NJ"}
]
},
{
"id": 2,
"name": "UK",
"states": [
{"id": 1, "name"="London"}
{"id": 2, "name"="Manchester"}
]
}
]
}
HTML View
<select ui-select2 ng-model="countryPicked" data-placeholder="Pick a country">
<option value=""></option>
<option ng-repeat="country in data.countries" value="{{country.id}}">{{country.name}} </option>
</select>
<select ui-select2 ng-model="statePicked" data-placeholder="Pick a state" ng-if="country">
<option value=""></option>
<option ng-repeat="state in data.countries[countryPicked]" value="{{state.id}}">{{state.name}}</option>
</select>
<p>Country picked: {{ countryPicked }}</p>
<p>State picked: {{ statePicked }}</p>
Fiddle with the relevant code: http://jsfiddle.net/gFCzV/7/
I'm trying to set the selected value of a drop down that is bound to a child collection of an object referenced in an ng-repeat. I don't know how to set the selected option since I can't reference the collection it's being bound to in any way that I'm aware of.
HTML:
<div ng-app="myApp" ng-controller="SomeController">
<div ng-repeat="Person in People">
<div class="listheader">{{Person.firstName}} {{Person.lastName}}</div>
<div class="listitem" ng-repeat="Choice in Person.Choices">
{{Choice.Name}}:
<select
ng-model="Choice.SelectedOption"
ng-options="choice.Name for choice in Choice.Options"></select>
{{Choice.SelectedOption.ID}}
</div>
</div>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope) {
$scope.People = [{
"firstName": "John",
"lastName": "Doe",
"Choices": [
{
"Name":"Dinner",
"Options":[{Name:"Fish",ID:1}, {Name:"Chicken",ID:2}, {Name:"Beef",ID:3}],
"SelectedOption":{Name:"Chicken",ID:2} //this doesn't work
},
{
"Name":"Lunch",
"Options":[{Name:"Macaroni",ID:1}, {Name:"PB&J",ID:2}, {Name:"Fish",ID:3}],
"SelectedOption":""
}
],
}, {
"firstName": "Jane",
"lastName": "Doe"
}];
});
Is this the one case where I should actually be using ng-init with a SelectedIndex on the model?
If using AngularJS 1.2 you can use 'track by' to tell Angular how to compare objects.
<select
ng-model="Choice.SelectedOption"
ng-options="choice.Name for choice in Choice.Options track by choice.ID">
</select>
Updated fiddle http://jsfiddle.net/gFCzV/34/
You can use the ID field as the equality identifier. You can't use the adhoc object for this case because AngularJS checks references equality when comparing objects.
<select
ng-model="Choice.SelectedOption.ID"
ng-options="choice.ID as choice.Name for choice in Choice.Options">
</select>
Using ng-selected for selected value. I Have successfully implemented code in AngularJS v1.3.2
<select ng-model="objBillingAddress.StateId" >
<option data-ng-repeat="c in States" value="{{c.StateId}}" ng-selected="objBillingAddress.BillingStateId==c.StateId">{{c.StateName}}</option>
</select>