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/
Related
if (url.indexOf('master/confirm-account') > 0) {
$scope.accountInfo = 'Confirm Account';
$scope.page = 'confirm_account';
$scope.activeTab = true;
} else if (url.indexOf('master/master-profile') > 0) {
$scope.accountInfo = 'Confirm Account';
$scope.page = 'master_profile';
$scope.activeTab = true;
} else {
$scope.accountInfo = 'Create Account';
}
<div ng-class = "{'process-step' : true, '({{page}}=='confirm_account') ? 'active-tab' : ' '}" >
How can I add process-step and active-tab class
Expected result if condition match then it become like that
The ng-class works like
{'add_this_class' : (if_this_expression_is_true)}
and not in the other way.
try this
<div class="process-step" ng-class="{'active-tab' : (page =='confirm_account') }">
Seeing to the complexity of your class matching logic you could go for second way of implementing ng-class
** Inside HTML**
<div class="process-step" ng-class="ctrl.getPageBasedClass()">
Inside Controller
var self.getPageBasedClass = function(){
var yourClassNameAsString = // your logic for class name
return yourClassNameAsString;
}
I need to load the list of fields whenever the special character entered into kendo editor and replace the character by the field value.Here I mention my code
<textarea kendo-editor k-ng-model="trigger.message " calss = 'message' ng-change = viewList></textarea >
<ul>
<li ng-repeat="option in data" ng-click="setData(option.field_name)">{{option.field_name}}</li>
</ul>
in controller :
$scope.viewList = function() {
var templist = []
if ($scope.trigger.message == '' || $scope.trigger.message == undefined) {
templist = [];
} else if ($scope.trigger.message.indexOf('#') > -1) {
templist = $scope.fields;
}
$scope.messageFields = templist;
}
$scope.setData = function(value) {
$scope.trigger.message = $scope.trigger.message.replace('#', '') + " %" + value + "% ";
$scope.messageFields = [];
}
Anyone guides me to fix this.Thanks in advance.
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);
}
});
I started to play with angular and I am trying to write a simple app that consists of categories containing items. ( I am trying to implement a tutorial for my needs )
Now I am trying to add a filter to select items by categories. I can filter them unless I choose All categories. I cant get all the categories.
I have edges service :
angular.module('swFrontApp')
.controller('EdgesController', function ($scope, edges,categories) {
$scope.edges = edges.query();
$scope.categories = categories.query();
$scope.filterBy = {
search: '',
category: $scope.categories[0]
};
var selectedEdge = null;
$scope.selectEdge = function(edge) {
selectedEdge = (selectedEdge === edge) ? null : edge;
};
$scope.isSelected = function(edge) {
return edge === selectedEdge;
};
$scope.displayRequirements = function(reqs) {
var result = '';
for ( var i = 0; i < reqs.length; i ++) {
if (result !== '' ) { result += ', '}
if (reqs[i].name) {
result += reqs[i].name+ ' ';
}
result += reqs[i].value;
}
return result;
};
});
and I try to filter them using :
angular.module('swFrontApp').filter('edges', function() {
return function(edges, filterBy) {
return edges.filter( function( element, index, array ) {
return element.category.name === filterBy.category.name;
});
};
} );
Here is my html to get edges with categories filter
<select
name="category"
ng-model="filterBy.category"
ng-options="c.name for c in categories"
class="form-control"></select>
<ul>
<li ng-repeat-start="edge in edges | filter:{name: filterBy.search}| edges: filterBy " ng-click="selectEdge(edge)">
<span class="label label-default">{{ edge.category.name }}</span>
{{edge.name}}
<span class="text-muted">({{ displayRequirements(edge.requirements) }})</span>
</li>
<li ng-repeat-end ng-show="isSelected(edge)">
{{edge.description}}
</li>
</ul>
I formed My Plunker link is here.
Thanks
It doesn't work because of the category.name attribute. In your categoriesService.js you return collection where name equals to All. But if you look into EdgesService file, you'll see that there is no such option as 'All'. So this comparison in script.js file (in your filter)
return element.category.name === filterBy.category.name;
will always return false when filterby.category.name equals to 'All'.
The way to fix it is to change it to something like this:
return element.category.name === filterBy.category.name || filterBy.category.name === 'All';
This way it will always return true if 'All' category is selected.
Also later in the course rank option will be introduced as well. You can browse the code for that project here: https://github.com/Remchi/sw-front
Hope that helps. :)
I have created a select tag with multiple to show it as a listbox and not dropdown.
I have a property which should hold the selected schoolclass which consists of multiple properties like: id, schoolclass , subject, schoolclassIdentifier and color.
When I select now an item in the listbox and press the delete button the $scope.activeStep.selectedSchoolclassCodes array contains one string like "Math10b" actually the selectedSchoolclassCodes array should contain an object created from the above properties.
Why is my selected object wrong?
HTML
<div class="col-md-6">
<select size="10" class="form-control col-md-6" multiple ng-model="activeStep.selectedSchoolclassCodes">
<option class="co-md-6" ng-repeat="item in activeStep.schoolclasses" style="background: rgb({{item.color}})" value="{{item.schoolclassCode}}">{{item.schoolclassCode}}</option>
</select>
</div>
CONTROLLER
'use strict';
angular.module('iplanmylessons').controller('EditSchoolclassCodeWizardStepController', function ($scope, wizardDataFactory, SchoolclassCodeViewModel) {
$scope.activeStep.schoolclassCodeColors = [
'255,165,0',
'255,255,0',
'145,240,140',
'0,128,0',
'170,210,230',
'255,190,200',
'240,130,240',
'100,100,255',
'210,210,210',
'255,0,0'
];
$scope.activeStep.selectedSchoolclassCodes = wizardDataFactory.schoolclassCodesAdded[0];
$scope.activeStep.newSchoolclass = "";
$scope.activeStep.newSubject = "";
$scope.activeStep.newSchoolclassIdentifier = "";
$scope.activeStep.schoolclasses = wizardDataFactory.schoolclassCodesAdded;
$scope.activeStep.schoolclassCodeColorsIsOpen = false;
$scope.activeStep.selectedSchoolclassCodeColor = null;
$scope.activeStep.deleteSchoolclassCode = function () {
for (var i = 0; i < $scope.activeStep.selectedSchoolclassCodes.length; i++) {
var index = Enumerable.from( wizardDataFactory.schoolclassCodesAdded).indexOf(function (s) {
return s.schoolclassCode === $scope.activeStep.selectedSchoolclassCodes[i].schoolclassCode;
});
wizardDataFactory.schoolclassCodesAdded.splice(index, 1);
}
$scope.activeStep.selectedSchoolclassCodes = null;
};
$scope.activeStep.schoolclassCode = function () {
return $scope.activeStep.newSubject + $scope.activeStep.newSchoolclass + $scope.activeStep.newSchoolclassIdentifier;
};
$scope.activeStep.setSchoolclassCodeColor = function (item) {
$scope.activeStep.selectedSchoolclassCodeColor = item;
$scope.activeStep.schoolclassCodeColorsIsOpen = false;
};
});
Have you try ng-options? This post has a good explanation of select/ ng-options with array of objects.
Hope it can help.