I'm trying to filter my array : here is my fiddle : Demo.
there are two select list , here is the condition :
when top select list === 123 ====> bottom select list should show 001,002,003
and
when top select list === 1234 ====> bottom select list should show 002,004,005
should i use something like this .slice(1, 3) ?
Many Thanks
Here is a fiddle that does what you want, where 1234 shows 002,004,005 just because it does. here
var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope){
$scope.colors = [
{name:'black', shade:'123'},
{name:'white', shade:'1234'},
];
var allRanges = [
{id:'001', number:'1'},
{id:'002', number:'2'},
{id:'003', number:'3'},
{id:'004', number:'4'},
{id:'005', number:'5'}
];
$scope.range = [];
$scope.check = function(){
var filter;
if($scope.color === "black"){
filter = function(r){
if(r.number < 4){
return true;
}
};
} else if($scope.color === 'white'){
filter = function(r){
if(['2','4','5'].indexOf(r.number) >= 0){
return true;
}
};
}
$scope.range = allRanges.filter(filter);
}
});
Related
I'm trying to customise this Angular Material example code (https://material.angularjs.org/latest/api/directive/mdSelect) to my needs.
I have three groups of select options. If an option is selected in a group, it should unselect all options in other groups (but leave other options in own group as they are).
In my code I have managed to get the logic working right (as you will see from the console.log outputs at the bottom), but the actual select options do not interact with user input.
My JSFiddle: https://jsfiddle.net/e2LLLxnb/8/
My JS code:
var myModule = angular.module('BlankApp', ['ngMaterial']);
myModule.controller("FilterCtrl", function($scope, $element) {
$scope.categories = ["Any", "Target Category", "Option 1", "Option 2", "Option 3", "Option 4"];
$scope.mustCatSelected;
$scope.categoryObj = {};
// build the list of options with values and groups - create equivalent of $scope.data for <md-option ng-repeat="item in categoryObj.data.items">
var finGroup = [];
$scope.categories.forEach(function(value,key){
if(key>1){
finGroup.push(key);
};
});
$scope.categoryObj.data = {items: [], groups: [{
group: [0]
}, {
group: [1]
}, {
group: finGroup
}]};
$scope.categories.forEach(function(value,key){
$scope.categoryObj.data.items.push({name: value,
value: false,
id: (key + 1)});
});
$scope.clickOn = function(item, index) {
if(item.value == false){item.value = item.name;}
else {item.value = false;}
if (item.value === false) {
} else {
var thisGroup = [];
angular.forEach($scope.categoryObj.data.groups, function(value, key) {
if (value.group.indexOf(index) !== -1) {
thisGroup = value.group;
}
});
angular.forEach($scope.categoryObj.data.items, function(value, key) {
if (thisGroup.indexOf(key) !== -1) {
return;
} else {
value.value = false;
}
});
$scope.mustCatSelected = $scope.categoryObj.data.items.filter(function(e){
return e.value != false;
});
console.log($scope.mustCatSelected);
console.log($scope.categoryObj.data.items);
}
}
//search-term header
$scope.searchTerm;
$scope.clearSearchTerm = function() {
$scope.searchTerm = '';
};
// The md-select directive eats keydown events for some quick select
// logic. Since we have a search input here, we don't need that logic.
$element.find('input').on('keydown', function(ev) {
ev.stopPropagation();
});
});
Solved (finally!): https://jsfiddle.net/hqck87t1/4/
var myModule = angular.module('BlankApp', ['ngMaterial']);
myModule.controller("FilterCtrl", function($scope, $element) {
$scope.categories = ["Any", "None", "Option 1", "Option 2", "Option 3", "Option 4"];
$scope.mustCatSelected = [];
$scope.categoryObj = {};
$scope.categoryObj.items = [];
$scope.categories.forEach(function(value,key){
var grp;
if (key < 2){grp = key;}
if (key >= 2){grp = 2;}
$scope.categoryObj.items.push({
name: value,
id: (key + 1),
group: grp});
});
//set default
$scope.mustCatSelected.push($scope.categoryObj.items[0]);
$scope.clickOn = clickOn;
function clickOn(newValue, oldValue, type) {
//console.log($scope.categoryObj.items);
//console.log(oldValue);
if(oldValue.length == 0) {
return false;
}
//create arrays of new and old option ids
oldValue = JSON.parse(oldValue);
var newIds = [];
var oldIds = [];
newValue.forEach(function(value,key){
newIds.push(value.id);
});
oldValue.forEach(function(value,key){
oldIds.push(value.id);
});
//define and set the clicked value
var clickedValue;
newIds.forEach(function(value, key){
if(oldIds.indexOf(value) == -1) {
clickedValue = value;
}
});
var clickedGroup;
newValue.forEach(function(value,key){
if(value.id == clickedValue){
clickedGroup = value.group;
}
});
//console.log([clickedValue, clickedGroup]);
//console.log([newIds, oldIds, clickedValue]);
if(type == 'mustCat'){
$scope.mustCatSelected = $scope.mustCatSelected.filter(function(e){
return e.group == clickedGroup;
});
}
}
//search term above select
$scope.searchTerm;
$scope.clearSearchTerm = function() {
$scope.searchTerm = '';
};
// The md-select directive eats keydown events for some quick select
// logic. Since we have a search input here, we don't need that logic.
$element.find('input').on('keydown', function(ev) {
ev.stopPropagation();
});
});
There key to the solution lies in two things:
Using ng-change instead of ng-click. The former is used to distinguish the state of ng-model inline vs the specified state of ng-model after the change event. Whereas ng-click is not reliable for this.
Write the ng-change function in the html like this:
ng-change="clickOn(mustCatSelected, '{{mustCatSelected}}')"
where mustCatSelected is the ng-model and '{{mustCatSelected}}' the inline state of ng-model before the change event.
Now we have an multiple md-select with logic handling the selection of options / groups of options.
I am having a list in angular js with many rows . I wanted to select multiple rowsin the list and add it to another table .
My code is
<li class = "list-group-item listroleitem" ng-repeat='role in roles' ng-click="selectRow(role)
" ng-class="{selectedRole: role === idSelectedRow}">{{role.roleName}}</li>
Controller :
$scope.selectRow = function(name){
$scope.idSelectedRow = name;
};
how to do it ?
Since you control the selected rows variable, why not initialise it as an array?
$scope.idSelectedRow = [];
$scope.selectRow = function(name){
if( $scope.idSelectedRow.indexOf(name) > -1 )
$scope.idSelectedRow.splice($scope.idSelectedRow.indexOf(name), 1);
else
$scope.idSelectedRow.push( name );
};
And then use this in css:
<li class = "list-group-item listroleitem" ng-repeat='role in roles' ng-click="selectRow(role)
" ng-class="{selectedRole: isSelected( role ) }">{{role.roleName}}</li>
$scope.isSelected = function(some_role){
return $scope.idSelectedRow.indexOf(role) >-1;
}
Change your code to
<li class = "list-group-item listroleitem" ng-repeat='role in roles' ng-click="selectRow(role)
" ng-class="{selectedRole: role.selected==true}">{{role.roleName}}---{{role.selected}}</li>
function TodoCtrl($scope) {
$scope.roles = [{roleName:"abc"}, {roleName:"dc"}]
$scope.name = 'Superhero';
$scope.selectRow = function(role){
role.selected = !role.selected;
};
}
https://jsfiddle.net/U3pVM/30783/
I'm learning angularjs and got an exercise that wants me to Use angular filter to show a title in the following format :
first letter of each word upper cased and each other letter lower cased also
remove any non-English letters from the title. For example:
A title with the name
“##THIS is a Title!!”
should be changed to
“This Is A Title”
I'm getting each title from an array of objects and present them like so.
<div ng-repeat="obj in objects">
<h3 class="panel-title">{{obj.Title}}</h3>
</div>
i understand that filter receives an array and filters through it . but this requires me to filter the string.
been searching for a while, how can i do this?
please refer below fiddle
http://jsfiddle.net/HB7LU/28315/
<div ng-controller="MyCtrl">
Hello, {{ name | ordinal|capitalize }}
</div>
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Super hero!!12##3';
}
myApp.filter('ordinal', function() {
// Create the return function
// set the required parameter name to **number**
return function(strTitle) {
// Ensure that the passed in data is a number
// If the data is not a number or is less than one (thus not having a cardinal value) return it unmodified.
strTitle=strTitle.replace(/[^a-zA-Z ]/g, "")
return strTitle;
}
});
myApp.filter('capitalize', function() {
return function(input){
if(input.indexOf(' ') !== -1){
var inputPieces,
i;
input = input.toLowerCase();
inputPieces = input.split(' ');
for(i = 0; i < inputPieces.length; i++){
inputPieces[i] = capitalizeString(inputPieces[i]);
}
return inputPieces.toString().replace(/,/g, ' ');
}
else {
input = input.toLowerCase();
return capitalizeString(input);
}
function capitalizeString(inputString){
return inputString.substring(0,1).toUpperCase() + inputString.substring(1);
}
};
});
angular.module('app', []).filter('myFilter', function(){
return function(input){
if(!input)
return;
var out = '';
var english = /^[A-Za-z0-9 ]*$/;
for(var letter of input)
if(english.test(letter))
out += letter;
var result = '';
for(var i = 0; i < out.length; i++)
result += out[i][(i === 0 || out[i-1] == ' ') ? 'toUpperCase' : 'toLowerCase']();
return result;
}
})
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<body ng-app="app">
<input ng-init='text="##THIS is a Title!!"' type='text' ng-model='text'>
<p>{{text | myFilter}}</p>
</body>
I have a smimple ng-repeat that displays user details. I am trying to set all the rows to be selected.
Currently I can manually click and select all the rows individually using following code:
<tr ng-repeat="room in classrooms" ng-class="{'selected': room.selected}" ng-click="select(room)">
in controller
$scope.select = function(item) {
item.selected ? item.selected = false : item.selected = true;
}
and to get data from the selected rows I use following logic
$scope.getAllSelectedRows = function()
{
var x = $filter("filter")($scope.classrooms,
{
selected: true
}, true);
console.log(x);
}
UPDATED FROM #KADIMA RESPONSE
$scope.toggleSelectAll = function()
{
angular.forEach($scope.classrooms, function(room) {
room.selected ? room.selected = false : room.selected = true;
})
}
Set up a new function in your controller:
$scope.selectAll = function() {
angular.forEach(classrooms, function(room) {
room.selected = true
}
}
And then you can create a button in your html to call this function.
If you want to select all data you got you can set selected property using angular.forEach() method.
https://docs.angularjs.org/api/ng/function/angular.forEach
In your case:
angular.forEach(x, fuction(value) {
value.selected = true;
}
what i am trying to achieve is that when i am double clicking and item in my grid i traverse inside it, according to it my breadcrumbs is updating. but when i am clicking back in breadcrumbs then breadcrumbs previous value is removed but when i am moving inside again by double click it show previous removed value also. i am attaching my code and also a image to better understand.
<div id="breadCrumb"><div ng-click="breadCrumbFilter('^/xyz/$')" style="float:left;">xyz</div>
<div ng-repeat="bCrumb in bCrumbs" id="{{bCrumb.name}}" style="float:left;
" ng-click="breadCrumbFilter(bCrumb)">{{ bCrumb.name }}</div></div>
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.filterOptions = {
filterText: '^/xyz/$'
};
$scope.breadCrumbFilter = function(bCrumb) {
var filterText = bCrumb.path;
if(filterText == null){
filterText = bCrumb;
}
var active = $scope.filterOptions.filterText;
if ($scope.filterOptions.filterText === filterText) {
$scope.filterOptions.filterText = filterText;
}
else if ($scope.filterOptions.filterText !== '' ) {
$scope.filterOptions.filterText = filterText;
}
$scope.resetBreadcrumbs(filterText,active);
};
$scope.resetBreadcrumbs = function(fText,rActive){
var reset = fText;
var activeBreadcrumbs = rActive;
activeBreadcrumbs = activeBreadcrumbs.substring(reset.length -1, activeBreadcrumbs.lastIndexOf("/"));
var myEl = angular.element(document.getElementById('/ '+activeBreadcrumbs));
myEl.remove();
};
$scope.filterFpath = function(row) {
var fileName = row.entity.name;
var folderPath = row.entity.Full_Path;
var newPath = folderPath+fileName+'/';
var filterText = '^'+newPath+'$';
if ($scope.filterOptions.filterText ==='^'+folderPath+'$') {
$scope.filterOptions.filterText = filterText;
}
else if ($scope.filterOptions.filterText === filterText) {
$scope.filterOptions.filterText = '';
}
$scope.addname('/ '+fileName,filterText);
};
$scope.bCrumbs = [] ;
$scope.addname=function(name,path)
{
obj={};
obj['name'] = name;
obj['path'] = path;
$scope.bCrumbs.push(obj);
};
var rowTempl = '<div ng-dblClick="filterFpath(row)" ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" '+'ng-class="col.colIndex()" class="ngCell{{col.cellClass}}"><div ng-cell></div></div>';
$scope.myData = [{name: "Moroni", Full_Path: "/xyz/"},
{name: "Tiancum", Full_Path: "/xyz/Moroni/"},
{name: "Jacob", Full_Path: "/xyz/"},
{name: "Nephi", Full_Path: "/xyz/Moroni/Tiancum/"},
{name: "Nephiss", Full_Path: "/xyz/"}];
$scope.gridOptions = {
data: 'myData',
filterOptions: $scope.filterOptions,
rowTemplate: rowTempl,
};
});
what happening right now:
1st image when data loaded in breadcrumbs 'xyz' displayed by default
when double click on moroni it is traversed inside and breadcrumbs updated.
when i click on xyz come back again:
Again if i traverse inside moroni its displays something like this:
What is the issue i am not able to figure it out.
By seeing your code i found out that you are removing dom element but you are not deleting it from array so try finding index of the desired remove file and then use 'slice' in that.
Try something like this:
<div id="breadCrumb"><div ng-click="breadCrumbFilter('^/xyz/$')" style="float:left;">xyz</div>
<div ng-repeat="bCrumb in bCrumbs" id="{{bCrumb.name}}" style="float:left;
" ng-click="breadCrumbFilter(bCrumb,$index)">{{ bCrumb.name }}</div></div>
$scope.breadCrumbFilter = function(bCrumbs,$index) {
$scope.bCrumbs.splice($index+1);
var d = $scope.bCrumbs.length -1;
path = bCrumbs[d].path;
var filterText = path;
if(filterText == null){
filterText = bCrumb;
}
var active = $scope.filterOptions.filterText;
if ($scope.filterOptions.filterText === filterText) {
$scope.filterOptions.filterText = filterText;
}
else if ($scope.filterOptions.filterText !== '' ) {
$scope.filterOptions.filterText = filterText;
}
};
try this out.