I'm trying to perform an orderBy operation in AngularJS based on a chosen select box value.
The problem I'm having is changing the optional :true or :false flags depending on the selected value.
For example, 'alphabetical' order, the flag would have to be :false, but for 'date' (most recent), the flag needs to be :true.
I've tried hardcoding the flags in the scope options but still not working.
html
<div>
<label>Country filter</label>
<input type="text" ng-model="countryFilter" />
<label>Order by</label>
<select ng-model="selectedOrder" ng-options="option for option in options"></select>
</div>
<ul>
<li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder">{{ detail }}</li>
</ul>
app.js
var app = angular.module('plunker', []);
app.controller('MyCtrl', function($scope) {
// order by options
$scope.options = ['country', 'address', 'date'];
// all countries
$scope.details = [{
id:1, country:'Finland', address:'Mainstreet 2', date:'2015-05-02'
},{
id:2, country:'Mexico', address:'Some address', date:'2015-05-05'
},{
id:3, country:'Canada', address:'Snowroad 45', date:'2015-03-02'
}];
});
Here is a plunker.
I would suggest to change your order options from strings to objects, which include the information if the list should be reversed for this order:
$scope.options = [{value : 'country', reversed : false}, {value : 'address', reversed : false}, {value : 'date', reversed : true}];
And the ng-repeat to:
<li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder.value:selectedOrder.reversed">{{ detail }}</li>
http://plnkr.co/edit/JXtHa2jXUy7Y5BsvsdL9?p=preview
Related
I have dropdown in which options are coming from array using ng-repeat. It is working as normal drop-down. But I want in a different way. If one option is selected, it should be disabled in the other dropdowns. can we do like that in angular?
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="address in addresses">
Billing State:
<select
ng-model="address.state"
ng-options="state.lookupCode as state.description for state in lov_state"></select>
<tt>State selected: {{address.state}}</tt>
</div>
</div>
controller code:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.addresses = [
{'state': 'AL'},
{'state': 'CA'},
{'state': 'FL'}
];
$scope.lov_state = [
{'lookupCode': 'AL', 'description': 'Alabama'},
{'lookupCode': 'FL', 'description': 'Florida'},
{'lookupCode': 'CA', 'description': 'California'},
{'lookupCode': 'DE', 'description': 'Delaware'}
];
});
Please help me to do that. Here is the jsfiddle link.
https://jsfiddle.net/santhosh1a32/3vd7hyrq/
You could use disable option provided in ng-options it self by using disable when condition in a place before for keyword.
<div ng-repeat="address in addresses">
Billing State:
<select ng-model="address.state" ng-change="checkSelected(address.state)"
ng-options="state.lookupCode as state.description disable when (address.state != state.lookupCode && state.selected) for state in lov_state">
</select>
<tt>State selected: {{address.state}}</tt>
</div>
Demo Here
I am currently using ui-select (https://github.com/angular-ui/ui-select) for dropdowns. I have included select.js and select.css in my index.html file. I have also installed angular-sanitize through bower.
This is what my controller looks like :
use strict';
angular.module('myApp.home', [ 'ui.select', 'ngSanitize']).controller('ScheduleCtrl', ScheduleCtrl);
ScheduleCtrl['$inject'] = [ '$stateParams', '$state' ];
function ScheduleCtrl($stateParams, $state) {
var vm=this;
vm.itemArray = [
{id: 1, name: 'first'},
{id: 2, name: 'second'},
{id: 3, name: 'third'},
{id: 4, name: 'fourth'},
{id: 5, name: 'fifth'},
];
vm.scheduleEvents = [{
id:1,
name:'Event1'
},
{
id:2,
name:'Event2'
}];
}
And my view contains :
<ui-select ng-model="selectedItem">
<ui-select-match>
<span ng-bind="$select.selected.name"></span>
</ui-select-match>
<ui-select-choices repeat="item in (vm.itemArray | filter: $select.search) track by item.id">
<span ng-bind="item.name"></span>
</ui-select-choices>
</ui-select>
However, my view is blank and it does not seem to be hitting the ui-select directive.
Remove ( and ).
<ui-select-choices repeat="item in vm.itemArray | filter: $select.search track by item.id">
<span ng-bind="item.name"></span>
</ui-select-choices>
See running on plunker.
Another thing you can test, comment this line:
//ScheduleCtrl['$inject'] = [ '$stateParams', '$state' ];
I didn't understand what it is doing, but with it the example on plunker doesn't work.
So I have a pretty basic select that looks like this:
<ui-select theme="select2" search-enabled="false" ng-model="obj.myModel">
<ui-select-match>{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item.value as item in choices">
<span>
{{item.name}}
</span>
</ui-select-choices>
</ui-select>
Let's say the choices are defined as
$scope.choices = [
{value: 'some_value_1', name: 'Default name'},
{value: 'some_value_2', name: 'Default name 2'}
]
Now let's assume that the user has selected the item with value some_value_1. After that a server response comes in that updates the choices list with different names
$scope.choices = [
{value: 'some_value_1', name: 'Real name'},
{value: 'some_value_2', name: 'Real name 2'}
]
Notice that the value part that is saved in the model stays the same. The name in <ui-select> is still Default name when I would want it to change to Real name.
plnkr.co
Is there a way to make the selected name correspond to updated choices?
My starting point is this Plunker, that contains a table made with AngularJS and UI-Grid 3.0. When I double-click on a cell with a template (let's take as an example the gender one), a select element is visible as it enters in edit mode.
But when this cell loses the focus (i.e. clicking outside the table or on another cell), the select element disapears and the cell goes back to the previous state.
Even though that is the default thing to do and the usual one, I'd like to keep the edit mode of each cell no matter if the focus is lost, and go back to the fixed mode only when an option is selected. I need to be able to keep one or more cells in this edit mode at the same time.
Also It'd be great if the gender field in the JSON array could be in a "intermediate" state while in edit mode (it could be the current third item "both" or anything else) and change to "male" or "female" once an option is selected.
The current code is the following:
HTML:
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
<hr>{{gridOptions.data | json}}
</div>
JS:
var app = angular.module('app', ['ngAnimate', 'ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.genderTypes = [{
ID: 1,
type: 'female'
}, {
ID: 2,
type: 'male'
}, {
ID: 3,
type: 'both'
}];
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
enableCellEditOnFocus: true,
columnDefs: [{
field: 'name',
sort: {
direction: 'desc',
priority: 1
}
}, {
field: 'gender',
editType: 'dropdown',
enableCellEdit: true,
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownOptionsArray: $scope.genderTypes,
editDropdownIdLabel: 'type',
editDropdownValueLabel: 'type'
}, {
field: 'company',
enableSorting: false
}]
};
$http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}
]);
I have just looked lightly at your code but you should have editDropdownIdLabel as 'ID'. This should do it. if you have a more complex change going on maybe look at my suggestion below.
There is a function in ui-grid called uiGridEventEndCellEdit, even though you have changed the data in the grid have you pushed the changes to your server side? So after you changes something you can lose focus and catch the event and then update your model accordingly.
I am having the data as below in my controller JS,
Here Subject and exam object is related by the code value in subject object, for example if subject name is "science " then code is "sci" and i try to save this "sci" in mg-model "myOptionSub" and i try to display the data related to "sci" in second dropdown based on model value "myOptionSub" and in div below. I am not able to use the ng-model value which is given by first dropdown in second dropdown.
myApp.controller('parentCtrl', ['$scope', '$window', '$location', function ($scope, $window, $location) {
$scope.subject = {
"subarray": [{
'name': 'science',
'code': 'sci'
}, {
'name': 'maths',
'code': 'mat'
}]
};
$scope.exam = {
"sci": [{
'name': 'science 1',
'examcode': 's1'
}, {
'name': 'science 2',
'examcode': 's2'
}],
"mat": [{
'name': 'maths 1',
'examcode': 'm1'
}, {
'name': 'maths 2',
'examcode': 'm2'
}]
};
}]);
My HTML is
<select
ng-model="myOptionSub"
ng-options="subjectobj.code as subjectobj.name for subjectobj in subject.subarray">
</select>
<div>subject model: {{myOptionSub}}</div>
<div>subject model: {{exam.myOptionSub}}</div>
<select
ng-model="myOptionExam"
ng-options="examobj.examcode as examobj.name for examobj in exam.myOptionSub">
</select>
<div>exam model: {{myOptionExam}}</div>
Here i want to use the selected value of first dropdown (which is stored in model "myOptionSub") as a filter to show the items in selected dropdown.
And My Doubt is in HTML where are the places and how i can use the model values in raw HTML and in any directives like ng-repeat as in my example.
JS Fiddle http://jsfiddle.net/shmdhussain/uh5VU/#run
Is this what you looking for FIDDLE
by using ng-change you could have achieved it
$scope.changesecond = function(){
$scope.exam.myOptionSub = $scope.exam[$scope.myOptionSub];
console.log($scope.examobj)
}