Here is my select dropdown
<select ng-model="searchtxt">
<option value="">Select Institute</option>
<option ng-repeat="user in products | unique : 'Institute'" value="{{user.Institute}}">{{user.Institute}}</option></select>
Here is my table
<table>
<thead>
<th>Institute<th>
</thead>
<tbody>
<tr ng-repeat="user in products>
<td>{{user.Institute}}</td>
</tr>
</tbody>
</table>
</table>
Here is my json
$scope.products = [
{"Institute": "Academy for Coaching Excellence"}
{"Institute": "Sample for training Excellence"}
{"Institute": "Demo for education Excellence"}
{"Institute": "Academy for best Excellence"}
];
I have tried following
$scope.selectedRows = [];
$scope.select = function(item) {
item.selected ? item.selected = false : item.selected = true;
}
$scope.getAllSelectedRows = function() {
var selectedRows = $filter("filter")($scope.users, {
selected: true
}, true);
$scope.selectedRows = selectedRows;
}
Can anyone help me to achive the optimal solution in my case ?
A multiple select is a regular select with the multiple property added to it. In angular, whatever you select will be bound to the ng-model variable.
I'm not sure if this example answers your question, but it shows how to access the data from the multi-select menu
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.products = [{
"Institute": "Academy for Coaching Excellence"
}, {
"Institute": "Sample for training Excellence"
}, {
"Institute": "Demo for education Excellence"
}, {
"Institute": "Academy for best Excellence"
}];
$scope.searchtxt = [];
}]);
.selected {
color: green;
font-style: italic;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
<div ng-app="selectExample">
<div ng-controller="ExampleController">
<div>Select Institute</div>
<select multiple ng-model="searchtxt">
<option ng-repeat="user in products" value="{{user.Institute}}">{{user.Institute}}</option>
</select>
<hr>
<table>
<thead>
<th>Institute
<th>
</thead>
<tbody>
<tr ng-repeat="user in products">
<td ng-class="{'selected':searchtxt.indexOf(user.Institute)>-1}">{{user.Institute}}</td>
</tr>
</tbody>
</table>
<hr> $scope.searchtxt: {{searchtxt}}
</div>
</div>
Related
I want to count iteration of ng-repeat, when condition match.
I've tried $index but it print for all itration/items in nested ng-repeat
Fiddle link :https://jsfiddle.net/gdr7p1zj/1/
<tbody ng-controller="MainCtrl">
<tr ng-repeat-start="a in test1">
<td>{{a.categoryName}}(count_here)</td>
</tr>
<tr ng-repeat-end ng-repeat="b in test" ng-if="a.categoryId==b.categoryId">
<td>{{b.name}}</td>
</tr>
</tbody>
i want like this
category_one(4) <=item count 4 items in this category so 4 will display
item1
item2
item3
item4
category_two(2)
item5
item6
<!-- this is in controller -->
$scope.test1=[{
categoryId:'1',categoryName:'category one'
},
{
categoryId:'2',categoryName:'category two'
}]
$scope.test = [
{categoryId:'1',name:'cate 1 elem0'},
{categoryId:'1',name:'cate 1 elem1'},
{categoryId:'2',name:'cate 2 elem'}
];
});
An option is to create a function (getCount) in the controller which do the count, something like this:
$scope.getCount = function(categoryId) { // returns the count by matching by categoryId
return $scope.test.filter(function(element) { // first, filter elements in `test`
return element.categoryId === categoryId; // matching by categoryId
}).length; // then, return the count of how many results we got after the filter
}
And in the html call that function like this:
<tbody ng-controller="MainCtrl">
<tr ng-repeat-start="a in test1">
<td>{{a.categoryName }} ({{getCount(a.categoryId)}})</td> <!-- <-- call the function in order to display the count -->
</tr>
<tr ng-repeat-end ng-repeat="b in test" ng-if="a.categoryId == b.categoryId">
<td>{{b.name}}</td>
</tr>
</tbody>
See a demo here: https://jsfiddle.net/lealceldeiro/v9gj1ok4/11/
Thanks for your help. But i get expected output without any functions call or filters
Here fiddle Link: https://jsfiddle.net/wk3nzj96/
htmlCode:
<div ng-app='myapp' >
<div ng-controller="MainCtrl">
<table ng-init="$scope.counter=0">
<tr ng-repeat-start="cate in mainCategory">
<td> {{cate.name}} ({{$scope.counter[$index]}})</td></tr>
<tr ng-repeat="itemsItr in items" ng-init="$scope.counter[$parent.$parent.$index]=$scope.counter[$parent.$parent.$index]+1" ng-if="itemsItr.mid==cate.id">
<td>{{itemsItr.name}}</td>
</tr>
<tr ng-repeat-end ng-if="false"></tr>
</table>
</div>
</div>
and ControllerCode:
(function() {
angular.module('myapp', []).controller('MainCtrl', function($scope) {
$scope.mainCategory = [
{ name: "categoryOne",id:1 },
{ name: "categoryTwo",id:2 }
];
$scope.items = [
{ name: "item1FromCateOne" ,mid:1 },
{ name: "item2FromCateOne",mid:1 },
{ name: "item3FromCateOne" ,mid:1 },
{ name: "item1FromCateTwo",mid:2 }
];
});
Is this Standard way to do this?
I am receiving a list of data from server and has displayed that in table format using ng-repeat along with checkbox in each row. My requirement is to pass the selected rows back to server upon clicking a removeUserData button. Am facing issue to get it done, help would be appreciated.
<table border="2" border-color=black>
<tr data-ng-repeat="user in users">
<td><input type="checkbox"></td><td>{{user.id}}</td><td>{{user.country}}</td><td>{{user.name}}</td>
</tr>
</table><br>
<button data-ng-click="removeUserData()" data-ng-show="users.length">Remove User</button>
I'd suggest you to make use of a new property in users, something like removed, then when checkbox is checked it will be true, otherwise false.
See it working:
(function() {
angular
.module("app", [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.removeUserData = removeUserData;
$scope.users = [
{
"id":1,
"country":"Italy",
"name":"Pavarotti"
},
{
"id":2,
"country":"French",
"name":"Some user"
}
];
function removeUserData() {
$scope.users = $scope.users.filter(function(user) {
return !user.removed;
})
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<tr ng-repeat="user in users">
<td>
<input type="checkbox" ng-model="user.removed">
</td>
<td ng-bind="user.id"></td>
<td ng-bind="user.country"></td>
<td ng-bind="user.name"></td>
</tr>
</table>
<div ng-if="users.length">
<hr>
<button ng-click="removeUserData()">Remove User</button>
</div>
</body>
</html>
your html
<div ng-app='myApp' ng-controller='myCtrl'>
<table border="2" border-color=black>
<tr data-ng-repeat="user in users">
<td>
<input type="checkbox" ng-change="storeIndexOfRow($index)">
</td>
<td>{{user.country}}</td>
<td>{{user.name}}</td>
</tr>
<button data-ng-click="removeUserData()" data-ng-show="users.length">Remove User</button>
Controller
var app = angular.module("myApp", []);
angular
.module('myApp')
.controller('myCtrl', ['$scope',
function ($scope) {
$scope.users = [
{ country: 'india', name: 'name1' },
{country: 'india2', name: 'name2'}
];
$scope.selectedIndex = [];
$scope.storeIndexOfRow = function (val) {
//write the logic for if checbox is checked or not
$scope.selectedIndex.push(val);
console.log($scope.selectedIndex);
};
$scope.removeUserData = function () {
angular.forEach($scope.selectedIndex, function (v, k) {
console.log($scope.users[v]);
});
};
}]);
One option is to use the ng-model to store a map that will decide for each row if it should be deleted or not,
The ng-model will bind the checkbox value to the given expression, in our case to a map.
for more information about ng-model see official documenation
the map will use user.id as a key, and will store a boolean value, based on the checkbox value.
lets call that map shouldDeleteUserMap.
Then we can filter your users array before sending it back to the server, based on shouldDeleteUserMap.
<table border="2" border-color=black>
<tr data-ng-repeat="user in users">
<td><input type="checkbox" ng-model='shouldDelteUserMap[user.id]' ></td><td>{{user.id}}</td><td>{{user.country}}</td><td>{{user.name}}</td>
</tr>
</table><br>
<button data-ng-click="removeUserData()" data-ng-show="users.length">Remove User</button>
and your controller, would look a bit like this:
angular.module('app',[])
.controller('myCtrl', function($scope){
$scope.shouldDelteUserMap = {};
$scope.users = [{
id: 1,
country: 'USA',
name: 'john'
},
{
id: 2,
country: 'Germany',
name: 'jane'
}];
$scope.removeUserData = function(){
var usersToRemove = $scope.users.filter( function(user){
return $scope.shouldDelteUserMap[user.id];
});
console.log(usersToRemove); // here comes your function that calls the server
}
});
and here is jsbin with an example:
http://jsbin.com/jisigiboha/edit?html,css,js,console,output
Functionality I want to implement is that when I click on "select All" checkbox, I want to push the selected item in new array and delete from current one.
Tried with splice function, but not able to delete all items from the first table.
enter code hereHere is the sample plnkr I have created, So when I click on "select All" from first table, all its items should get pushed in "New Table" and at the same time removed from "First table(named Old table)
This will clear your array and push all entries in $scope.merged
$scope.pushlist = function(data){
for(var item of data){
$scope.merged.push({"name":item.name});
}
data.length=0
};
Use angular.copy to make an copy of the object
var app = angular.module("myApp", []);
app.controller("SecondCtrl", function($scope) {
$scope.merged = [];
$scope.data = [{
"name": "ABC",
"selected": false
}, {
"name": "HJK",
"selected": false
}, {
"name": "PQR",
"selected": false
}, {
"name": "LMN",
"selected": false
}];
$scope.selectall = function(checkAll) {
if (checkAll) {
$scope.merged = angular.copy($scope.data);
$scope.data.length = 0;
} else {
$scope.data = angular.copy($scope.merged);
$scope.merged.length = 0;
}
};
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="myApp" ng-controller="SecondCtrl">
<div>
<h1>Old Table</h1>
<table>
<thead>
<th>
<input type="checkbox" ng-click="selectall(checkAll)" ng-model="checkAll">Select All</th>
<th>Name</th>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>
<input type="checkbox" ng-model="item.selected">
</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
<hr>
<div>
<h2>New Table</h2>
<table ng-show="merged">
<thead>
<th>Name</th>
</thead>
<tbody>
<tr ng-repeat="item in merged">
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Fiddle Demo
I have two arrays expArr and usrArr. I want to repeat the whole table based on first array and the second table should be repeated row wise.
$scope.expArr = [
{"competency":"Proficient", "Name":"course1"},
{"competency":"Proficient", "Name":"course2"},
{"competency":"Expert", "Name":"course3"},
{"competency":"Intermediate", "Name":"course4"},
{"competency":"Proficient", "Name":"course5"}
] ;
$scope.userArr = [
{"Name": "name1", "Prof":"Expert,Profocient,Basic,Basic,Basic"},
{"Name":"name2","Prof":"Expert,Profocient,Basic1,Basic1,Basic1"}
] ;
I want the table to contain corusename and proficiency and the next columns should be repeated based on the second array. So as a result each row will contain the coursename, proficiency and each user's proficiency(separate column for each user). How to achieve this.
here is the fiddle : http://jsfiddle.net/keshav_1007/ygzo8yfg/5/
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<table class="myTable">
<tr>
<th>Course</th>
<th>Expected Prof</th>
</tr>
<tr ng-repeat="comp in expArr track by $index">
<td>{{comp.Name}}</td>
<td>{{comp.competency}}</td>
</tr>
</table>
<table class="otherTable">
<tr>
<th ng-repeat="elem in custArr">{{elem.Name}}</th>
</tr>
</table>
</div>
JS:
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.expArr = [
{"competency":"Proficient", "Name":"course1"},
{"competency":"Proficient", "Name":"course2"},
{"competency":"Expert", "Name":"course3"},
{"competency":"Intermediate", "Name":"course4"},
{"competency":"Proficient", "Name":"course5"}
] ;
$scope.userArr = [
{"Name": "name1", "Prof":"Expert,Profocient,Basic,Basic,Basic"},
{"Name":"name2","Prof":"Expert,Profocient,Basic1,Basic1,Basic1"}
] ;
$scope.custArr = [];
angular.forEach($scope.userArr,function(item){
var profs = item.Prof.split(',');
$scope.custArr.push({"Name":item.Name,"userProf":profs});
});
console.log($scope.custArr);
});
angular.bootstrap(document, ['myApp']);
Iterate tr as per the length of the userProfs
Iterate item from array using index of tr
Use $parent.$index to get iteration index of parent
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.expArr = [{
"competency": "Proficient",
"Name": "course1"
}, {
"competency": "Proficient",
"Name": "course2"
}, {
"competency": "Expert",
"Name": "course3"
}, {
"competency": "Intermediate",
"Name": "course4"
}, {
"competency": "Proficient",
"Name": "course5"
}];
$scope.userArr = [{
"Name": "name1",
"Prof": "Expert,Profocient,Basic,Basic,Basic"
}, {
"Name": "name2",
"Prof": "Expert,Profocient,Basic1,Basic1,Basic1"
}];
$scope.custArr = [];
angular.forEach($scope.userArr, function(item) {
var profs = item.Prof.split(',');
$scope.custArr.push({
"Name": item.Name,
"userProf": profs
});
});
});
.otherTable tr td,
.myTable tr td {
border: 1px solid black;
}
.otherTable th,
.myTable th {
border: 1px solid black;
}
.otherTable,
.myTable {
display: inline-block;
float: left
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<h1>TTA</h1>
<div ng-app="myApp" ng-controller="myCtrl">
<table class="myTable">
<tr>
<th>Course</th>
<th>Expected Prof</th>
</tr>
<tr ng-repeat="comp in expArr track by $index">
<td>{{comp.Name}}</td>
<td>{{comp.competency}}</td>
</tr>
</table>
<table class="otherTable">
<tr>
<th ng-repeat="elem in custArr">{{elem.Name}}</th>
</tr>
<tr ng-repeat="u in custArr[0].userProf track by $index">
<td ng-repeat="key in custArr">{{key.userProf[$parent.$index]}}</td>
</tr>
</table>
</div>
Fiddle Demo
You need to split user prof in such a way that you can multiple users with multiple course names, please refer http://jsfiddle.net/ygzo8yfg/10/ running code of your problem.
Structure 2 dimensional array of courses/users
var profArr = $scope.userArr[0].Prof.split(',');
$scope.personArr = [];
$scope.suggestArr = [];
var rowArr = [];
angular.forEach($scope.userArr,function(item){
$scope.personArr.push({"name":item.Name});
});
for(var idx=0;idx<profArr.length; idx++){
rowArr = [];
angular.forEach($scope.userArr,function(item){
if(!item.profArr){
item.profArr = item.Prof.split(',');
}
rowArr.push({"proff":item.profArr[idx]});
});
$scope.suggestArr.push(rowArr);
}
Then iterate those in your table, first row for person names and data should iterate proficiency.
<table class="otherTable">
<tr>
<th ng-repeat="person in personArr">{{person.name}}</th>
</tr>
<tr ng-repeat="el in suggestArr">
<td ng-repeat="elem in el">{{elem.proff}}</td>
</tr>
</table>
So I am trying to create a dropdown selection menu in angularJS. I can list the contents using ng-repeat:
<table ng-table="tableParams" class="table">
<tr ng-repeat="food in foods">
<td data-title="'Name'">{{food.name}}</td>
</tr>
</table>
which displays for me a list of foods. I would like to turn this into a selection instead.
However no matter what I try it doesn't seem to display.
here is what I had worked on so far:
<select id="food_select"class="form-control"
ng-model="food"
ng-options="item as item.name for item in food track by item.id">
<option value="">(Pick food)</option>
</select>
Here is how I am getting the data:
function getFoodList() {
FoodService.getFoods().then(function (_data) {
$scope.foods= _data.foods;
console.log("foodlist"+JSON.stringify( $scope.foods));
});
}
and here is a json sample:
"id":"540894f9b2a136082606e5f0","created_at":"2014-09-04T16:36:09+0000","updated_at":"2014-09-04T16:36:09+0000","name":"bananas"
JSFiddle Demo
Where option is like your index value of the array food.
HTML
<div ng-app>
<div ng-controller="Ctrl">
<select ng-options="food.option as food.name for food in foods" ng-init="index = 0" ng-model="option[index]">{{food.name}}</select>
</div>
</div>
JS
function Ctrl($scope) {
$scope.foods = [{
option: "1",
name: "apple"
}, {
option: "2",
name: "orange"
}, {
option: "3",
name: "chicken"
}];