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
Related
I have two select box div for gettting scoredetails home teams and awayteams first and second innings
These two div are come in tabs only
So i need same ng-model in both innings for code reusing.but when i am using my browser will hang
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.homePlayers = [{
"id": "586150f2d99139510b4254bb",
"name": "Sachin Tendulkar",
"country": "India"
}, {
"id": "586150f2d99139510b4254b1",
"name": "Saurav Ganguly",
"country": "India"
}];
$scope.awayPlayers =
[{
"id": "586150f2d99139510b4254b2",
"name": "Shane Watson",
"country": "Aus"
}, {
"id": "586150f2d99139510b4254b3",
"name": "Steve Waugh",
"country": "Aus"
}];
});
this is my html content how to populate
<body ng-app="plunker" ng-controller="MainCtrl">
India bat vs Aus bowl<br>
<div class="row">
<select ng-model="battingDetail.batterId">
<option ng-repeat="item in homePlayers" value="{{item.id}}">{{item.name}}</option>
</select> <select ng-model="bowlingDetail.bowlerId">
<option ng-repeat="item in awayPlayers" value="{{item.id}}">{{item.name}}</option>
</select>
<a ng-click="submitScores('hometeam')">UPDATE SCORE</a>
</div>
Aus bat vs India bowl<br>
<div class="row">
<select ng-model="battingDetail.batterId">
<option ng-repeat="item in awayPlayers" value="{{item.id}}">{{item.name}}</option>
</select> <select ng-model="bowlingDetail.bowlerId">
<option ng-repeat="item in homePlayers" value="{{item.id}}">{{item.name}}</option>
</select>
<a ng-click="submitScores('awayteam')">UPDATE SCORE</a>
</div>
</body>
I have two select box div for gettting scoredetails home teams and awayteams first and second innings
These two div are not come in same page in my webpage tabs only.But when i am using this way ny browser will hang.
So i need same ng-model in both innings for code reusing.but when i am using my browser will hang
I have json of all countries with me.
{"countries":[
{"name":"Afghanistan","code":"AF"},
{"name":"Åland Islands","code":"AX"},
{"name":"United States","code":"US"},
{"name":"Canada","code":"CA"},
{"name":"India","code":"IN"}
]};
I want to create drop down like
"
Choose Country(Default)
United States
Canada
------------
Åland Islands
Afghanistan
India
So on..."
I can be achieved via ng-repeat like
<select name="country" id="country" data-ng-model="country" required data-ng-change="allSelect()">
<option value="default" data-ng-data-ng-bind="'Choose Country'"></option>
<option value="{{cList.code}}" data-ng-if="cList.code === 'US'" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option>
<option value="{{cList.code}}" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option>
<option value="default1">--------------------------------------------------</option>
<option value="{{cList.code}}" data-ng-if="cList.code !== 'US' && cList.code !== 'CA'" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option>
</select>
How can i do same via ng-options?
Currently if i want to select any option by default is not happening its creating blank string.
Country list and default values i am getting from different ajax call.
You need to make some changes to your JSON
JSON
{
"Collections": [{
"Name": "North America",
"Countries": [{
"Name": "United States",
"code": "US"
}, {
"Name": "Canada",
"code": "CA"
}
]
}, {
"Name": "Asia",
"Countries": [{
"Name": "India",
"value": "IN"
}
]
}]
}
HTML
<body ng-controller="dobController">
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select ng-model='theModel' ng-change="display(theModel)">
<optgroup ng-repeat='group in collection' label="{{group.Name}}">
<option ng-repeat='veh in group.Countries' value='{{group.Name}}::{{veh.Name}}'>{{veh.Name}}</option>
</optgroup>
</select>
</div>
</form>
</div>
</div>
Controller
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope", "$http",
function($scope, $http) {
$http.get('test.json').then(function(response) {
$scope.collection = response.data.Collections;
console.log(response);
});
$scope.display = function(name) {
alert(name.split("::")[0] + "." + name.split("::")[1]);
}
}
]);
DEMO
I am having this problem which I can't find the solution to.
1) I have a dropdown list which the data is pull in from a json file
2) When the user selects a item I want to dynamically add a input box without a button.
Got a jQuery code but wanted to do it the angular way, but read that ng-Change is not the same as jquery .change?
Can anyone help or point me into the right direction of how to do this.
HTML
<div class="main-content__right" ng-controller="QuestionController">
<div ng-repeat="element in questionList">
<fieldset>
<div id="add-more" class="well">
<div class="field">
<div style="width:100%;" class="dropdown">
<select name="{{options.name}}" id="select" data-ng-model="formData"
data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'"
ng-change="onCategoryChange(formData)">
<option value="" data-id="null" disabled="" selected="">Select an item...</option>
</select>
</div>
</div>
{{formData}}
</div>
</fieldset>
</div>
app.js
var app = angular.module("cab", []);
app.controller('QuestionController', function($scope) {
var $scope.formData = {};
$scope.questionList = [{
"sectionTitle": "Travel",
"subTitle": "How much do you spend on these items for your car?",
"inputType": "select",
"inputElement": [{
"label": "Public transport",
"name": "travelOutgoing",
"helpInfo": "include train journeys",
"type": "select"
}, {
"label": "Taxis",
"name": "travelOutgoing",
"type": "select"
}, {
"label": "Bicycle",
"name": "travelOutgoing",
"helpInfo": "general running costs such as repair or rental",
"type": "select"
}, {
"label": "Car rental",
"name": "travelOutgoing",
"helpInfo": "include fuel, parking charges and tolls",
"type": "select"
}
]
}];
$scope.onCategoryChange = function () {};
});
can be found on http://plnkr.co/edit/PPDYKjztPF528yli9FbN?p=preview
Your controller function needs to add each selection to an array on scope:
Controller
app.controller('QuestionController', function($scope) {
$scope.formData = [];
$scope.selectedValue = {};
$scope.questionList = [{
"sectionTitle": "Travel",
"subTitle": "How much do you spend on these items for your car?",
"inputType": "select",
"inputElement": [{
"label": "Public transport",
"name": "travelOutgoing",
"helpInfo": "include train journeys",
"type": "select"
}, {
"label": "Taxis",
"name": "travelOutgoing",
"type": "select"
}, {
"label": "Bicycle",
"name": "travelOutgoing",
"helpInfo": "general running costs such as repair or rental",
"type": "select"
}, {
"label": "Car rental",
"name": "travelOutgoing",
"helpInfo": "include fuel, parking charges and tolls",
"type": "select"
}]
}];
$scope.onCategoryChange = function(selectedItem) {
$scope.formData.push(selectedItem)
};
});
Then you can use an ng-repeat to render all of the items in formData.
HTML
<fieldset>
<div id="add-more" class="well">
<div class="field">
<div style="width:100%;" class="dropdown">
<select name="{{options.name}}" id="select" data-ng-model="selectedValue" data-ng-options="options as options.label for options in element.inputElement | orderBy:'label'" ng-change="onCategoryChange(selectedValue)">
<option value="" data-id="null" disabled="" selected="">Select an item...</option>
</select>
</div>
</div>
<div ng-repeat="item in formData track by $index">
<input ng-model="item.label" />
</div>
</div>
</fieldset>
<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
What I am trying to do is sort some data by field value.
$scope.testarr = [{"id":"1","name":"coffee"},
{"id":"2","name":"tea"},
{"id":"3","name":"coffee"},
{"id":"4","name":"ice coffee"}]
in the html file i have select box and 3 options called coffee, tea and ice coffee,
if i select coffee should be sorted like this
$scope.testarr = [{"id":"1","name":"coffee"},
{"id":"3","name":"coffee"},
{"id":"2","name":"tea"},
{"id":"4","name":"ice coffee"}]
if i select tea should be sorted like this
$scope.testarr = [
{"id":"2","name":"tea"},
{"id":"1","name":"coffee"},
{"id":"3","name":"coffee"},
{"id":"4","name":"ice coffee"}]
i'm trying to use order by but somehow it does't work
<div ng-repeat="item in testarr | orderBy: 'name'">
{{item.id}} ------ {{item.name}}
</div>
It does seem to work. Ensure that your ng-repeat has access to $scope.testarr (i.e. it is being declared on your $scope in the correct controller or directive.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.testarr = [{
"id": "1",
"name": "coffee"
}, {
"id": "2",
"name": "tea"
}, {
"id": "3",
"name": "coffee"
}, {
"id": "4",
"name": "ice coffee"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<div ng-repeat="item in testarr | orderBy: 'name'">
{{item.id}} ------ {{item.name}}
</div>
</div>
</div>