I have a drop down list consisting of name and address. if name is selected then my list should be sorted with name.
My code is not working properly` Order By
<div class="col-xs-2">
<select class="form-control" ng-change="changedvalue()" ng-model="Tosort.order">
<option value="None">-- Select --</option>
<option ng-model="Tosort.order" value="Name">Name</option>
<option ng-model="Tosort.order" value="Address">Address</option>
</select>
</div>
<li ng-repeat="x in details | filter: Tofilter.country | orderBy:sort.value">
You need to simply use ng-model instead of the ng-change() event. There are some other issues in your code as well like you need to provide ng-model only on the select tag. I think you may need to revisit some angular basics. I've shown how it could work below. the select tag will be bound to "sortBy" and the same is used in the "orderBy" filter
<div class="col-xs-2">
<select class="form-control" ng-model="sortBy">
<option value="None">-- Select --</option>
<option value="Name">Name</option>
<option value="Address">Address</option>
</select>
</div>
<li ng-repeat="x in details | filter: Tofilter.country | orderBy:sortBy">
I see you got lot's of answers while I was still writing my example. Damn you're fast! :)
Anyway, this would be content of your HTML
<body ng-controller="MyCtrl">
<div>
<!-- text input for filtering -->
<label>Country filter</label>
<input type="text" ng-model="countryFilter"></input>
<!-- options to order (filtered) results -->
<label>Order by</label>
<select ng-model="selectedOrder" ng-options="option for option in options"></select>
</div>
<ul>
<!-- show results: filter by country name and order by selected property name -->
<li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder">{{ detail }}</li>
</ul>
</body>
And this would be related controller
var app = angular.module('plunker', []);
app.controller('MyCtrl', function($scope) {
// order by options
$scope.options = ['country', 'address'];
// all countries
$scope.details = [{
id:1, country:'Country 1', address:'Address C'
},{
id:2, country:'Country 2', address:'Address B'
},{
id:3, country:'Country 3', address:'Address A'
}];
});
For future reference, working plunker here http://plnkr.co/edit/02Y3b7
Related
I use a filter at my ng-repeat and it works fine when I navigate to page (everything is shown - nothing is filtered) and when I filter also all is fine.
I only have problems when I will "deselect" the filter in that way that I select < option>< /option> in the select input. Than nothing is shown instead of all.
Does anyone know what I can do that when I select < option>< /option> that all is shown like at the beginning - when I navigate to the page?
somethingToIterate | filter: {institutionUserRole: {value: roleFilter}}
My select looks like this:
<select class="form-control roleSelect" ng-model="roleFilter" ng-options="role as role | translate for role in vm.roles">
<option></option>
</select>
If you are using an object in ng-model, I think you will need to add the default option to the list you loop thru in the ng-repeat.
Like this:
$scope.options = [
//add the default value in the options list.
{'value':'', 'label':''},
{'value':'1', 'label':'Option 1'},
{'value':'2', 'label':'Option 2'},
{'value':'3', 'label':'Option 3'},
{'value':'4', 'label':'Option 4'},
{'value':'5', 'label':'Option 5'},
{'value':'6', 'label':'Option 6'}
];
<div class="jumbotron">
<select ng-model="option" ng-options="item as item.label for item in options track by item.value">
</select>
<ul>
<li ng-repeat="item in data | filter: {name: option.value}">{{item.name}}
</li>
</ul>
</div>
or you can try it like this,
<select ng-model="selected.option">
<option value='' >select</option>
<option ng-repeat="option in options" value="option.value">{{option.label}}
</option>
</select>
Here is a working example. http://codepen.io/mkl/full/qZjwJG/
I am using ng-repeat to generate multiple drop down. But after storing the values it is not selecting the dropdown values as previously selected. In this example it should automatically display teacher1, teacher3 and teacher5 as selected values.
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="(i,teacherList) in Trip.teachers track by $index">
{{Trip.teachers[$index].id}}
<select m-required="true" ng-model="Trip.teachers[$index].id" class="teacher form-control" >
<option value="">Select Teacher</option>
<option ng-repeat="teacher in teachers" value="{{teacher.id}}">{{teacher.name}}</option>
</select>
</div>
<button ng-click="addTeacher();">Add Teacher</button>
<button ng-click="removeTeacher();" style="display:none;" class="removeTeacher">Remove</button>
</div>
and my angular code as below:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
$scope.Trip={
teachers : [
{"name":"teacher1","id":"1"},
{"name":"teacher3","id":"3"},
{"name":"teacher5","id":"5"}
]
};
$scope.teachers=[
{id:"1","name":"teacher1"},
{id:"2","name":"teacher2"},
{id:"3","name":"teacher3"},
{id:"4","name":"teacher4"},
{id:"5","name":"teacher5"},
{id:"6","name":"teacher6"}
];
$scope.addTeacher=function(){
$scope.Trip.teachers.push({"name":"","id":""});
document.getElementsByClassName("removeTeacher")[0].style.display="block";
}
$scope.removeTeacher=function(){
$scope.Trip.teachers.pop();
if($scope.Trip.teachers.length==1){
document.getElementsByClassName("removeTeacher")[0].style.display="none";
}
}
})
Here is the link to JSFiddle:
http://jsfiddle.net/dipgupta1986/10z7mda2/10/
It seems that you want to show the default value pre-selected, you can use ng-options and ng-model for setting the default value, by rewriting select as below :
<select m-required="true" ng-model="Trip.teachers[$index]"
ng-options="option.name for option in teachers track by option.id" >
Demo
ng-Options Documentation
I have list of locations in a select box. On selection of a location, the corresponding incidenttypes should be displayed in another select box.
$scope.locationNames=[
{id:"Onboard",value:"On-board service"},
{id:"Clubhouse",value:"Clubhouse"},
{id:"Gate",value:"Gate"}
];
$scope.incidentTypesList={
Onboard:[
{id:"IFE faulty",value:"IFE faulty"},
{id:"223",value:"No special meal as ordered"},
{id:"Spoilt",value:"Spoilt/damaged belongings"}
];
Clubhouse:[
{id:"",value"No appointments available"},
{id:"",value="Late/delayed transport service"},
{id:"",value="Facilities not available"}
];
};
I am able to get location names in the list using the below code.
<select class="firstDropDown" ng-model="location" ng-options="item.id as item.value for item in locationNames">
<option value="">Select location</option>
</select>
Can you please help me how to implement on selection on this to show the values in another select box.
I think the solution below fits your needs. There were some syntax errors in your array which needed to be fixed.
HTML
<div ng-app="myApp" ng-controller="myAppCtrl">
<select class="firstDropDown" ng-model="location" ng-options="item.id as item.value for item in locationNames">
<option value="">Select location</option>
</select>
<select class="secondDropDown" ng-model="incident" ng-options="incident.id as incident.value for incident in incidentTypesList[location]">
<option value="">Select incident</option>
</select>
</div>
JS
var myApp = angular.module("myApp", [])
myApp.controller("myAppCtrl", function($scope){
$scope.locationNames=[
{id:"Onboard",value:"On-board service"},
{id:"Clubhouse",value:"Clubhouse"},
{id:"Gate",value:"Gate"}
];
$scope.incidentTypesList={
Onboard:[
{id:"IFE faulty",value:"IFE faulty"},
{id:"223",value:"No special meal as ordered"},
{id:"Spoilt",value:"Spoilt/damaged belongings"}
],
Clubhouse:[
{id:"",value:"No appointments available"},
{id:"",value:"Late/delayed transport service"},
{id:"",value:"Facilities not available"}
]
}
});
JSFiddle: https://jsfiddle.net/ABr/wqy2ha9o/3/
I have input field:
<input type="text" ng-model="in">
Also select list:
<select ng-model="sel"></select>
How I can use two filters in ng-repeat something like:
ng-repeat="item in arr | filter:sel | filter:in"
My select list in header:
<div ng-controller="TestController">
<select ng-controller="in"></select>
</div>
Also in bottom of page I have:
<div ng-controller="TestController">{{in}}</div>
But {{in}} is empty
You're doing right.
The following can be taken as an example to apply filter. You can modify it to apply multiple filters as well.
Search field
<input type="text" ng-model="in" placeholder="Enter value to search.">
<select ng-model="sel">
<option value="1">One</option>
<option value="2">Two</option>
</select>
Using filter in ng-repeat:
<div>
<tr ng-repeat="item in filteredData = (arr | filter:in | filter: sel)">
</div>
or simple way for multiple filters like as per your question
<tr ng-repeat="item in arr| filter:in | filter: sel">
Then showing message whether data found or not.
<div ng-show="!(filteredData ).length">
No matching data found
</div>
I am creating a list of <select>'s with ng-repeat, there is a item.quantity that I need to be selected in each select in the list, I have tried several ways without success. Any help would be appreciated.
<div ng-repeat="item in items">
<select ng-model="selCartQuantity">
<option index="1" ng-selected="item.quantity=='1'">1</option>
<option index="2" ng-selected="item.quantity=='2'">2</option>
<option index="3" ng-selected="item.quantity=='3'">3</option>
<option index="4" ng-selected="item.quantity=='4'">4</option>
<option index="5" ng-selected="item.quantity=='5'">5</option>
</select>
</div>
in your controller you put the following code (of course you change $scope.items to your actual object )
$scope.items = [{name:'aaaaa'},{name:'bbbbb'}];
$scope.options= [1,2,3,4,5];
$scope.items.forEach(function(item,index){
item.selCartQuantity= $scope.options[0];
});
and in the html markup you put the following
<div ng-repeat="item in items">
<select ng-model="item.selCartQuantity" ng-options="option for option in options"></select>
</div>
`
I would reccomend checking out the angular select driective, as you shouldn't have to do the ng-repeat at all. The select directive will automatically set the selected option to be what you have in your model.