We Keep Coding

How can i use multi select dropdown on tables using angularjs?

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>

Dynamic attribute selection in Vue - previous selection is being made blank

The attributes data comes from an API and the attribute names are dynamic, however to make this example simpler i have put an example with an object which has Colour and Size. I was primarily trying to map data to an object selectedAttrObj - which has no problems, however when the second sets of attributes are selected (Size), the first one (Colour) is becoming blank. This must be due to the fact that the first v-model="selected" is being overwritten when second set is selected. This is a visual experience, and how I can make sure the first select stays with the selected option. Please do not try to hardcode as there could be countless number of attributes, so it needs to be dynamic (hence the reason for using selected for all attributes). If there is a better and simpler way of mapping the selected data to selectedAttrObj to avoid blanking out previous selections, please fire away! Thanks
function callMe(){
var vm = new Vue({
el : '#root',
data : {
attributes : {
"Colour": ["red", "black", "purple"],
"Size": ["8.0", "8.5", "9.0", "9.5", "10.0"]},
selectedAttrObj: {},
selected: ""
},
methods: {
selected_attributes(name, value) {
this.selectedAttrObj[name] = value
console.log(this.selectedAttrObj)
}
}
})
}
callMe();
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.11/dist/vue.js"></script>
<div id='root'>
<table>
<tr>
<th v-for="(item, key, index) in attributes "> {{ key }} </th>
</tr>
<tr>
<td v-for="(items, key, index) in attributes">
<select v-model="selected" #change="selected_attributes(key, selected)">
<option v-for="name in items"> {{ name }} </option>
</select>
</td>
</tr>
</table>
</div>
</div>

You can change your data variable selected to be a object and save the values based you the given key you are iterating.
Here is a snippet:
function callMe(){
var vm = new Vue({
el : '#root',
data : {
attributes : {
"Colour": ["red", "black", "purple"],
"Size": ["8.0", "8.5", "9.0", "9.5", "10.0"]},
selected: {}
}
})
}
callMe();
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='root'>
<table>
<tr>
<th v-for="(item, key, index) in attributes "> {{ key }} </th>
</tr>
<tr>
<td v-for="(items, key, index) in attributes">
<select v-model="selected[key]">
<option v-for="name in items"> {{ name }} </option>
</select>
</td>
</tr>
</table>
</div>
</div>

Filter does not show a message instead of a table if the filtering returns empty result

Having a table with data on it and a selector which must filter the data based on a selection made in a selector, I want to show a message ("No data") if the filtering returns no data.
The selector looks like this:
<select ng-model="$ctrl.type">
<option value="">All</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
table is generated here:
<tbody>
<tr ng-repeat="rows in $ctrl.myData | filter: {Type: $ctrl.type} track by $index">
<td>
<span>{{rows.Type}}</span>
</td>
<td>
<span>...</span>
</td>
</tr>
</tbody>
myData is an array of objects like:
myData = [
{Type: "1", SiteId: 8, SiteName: "aaa"},
{Type: "1", SiteId: 7, SiteName: "asb"},
{Type: "2", SiteId: 1, SiteName: "aaa"},
{Type: "1", SiteId: 17, SiteName: "x"},
{Type: "2", SiteId: 7, SiteName: "xx"}
];
It works fine as it is now but when I select 3 it shows the table headers and no data. I want to show a message in this case instead of the table headers.
I tried to wrap around the ng-repeat with an ng-if like this:
<tbody>
<div ng-if="$ctrl.myData.filter(s => s.Type == $ctrl.type).length > 0">
<tr ng-repeat=...>
...
</tr>
</div>
<div ng-if="$ctrl.myData.filter(s => s.Type == $ctrl.type).length == 0">
NO DATA FOR THIS OPTION
</div>
</tbody>
but it has no effect on it.
Any suggestions about how to show a message if the selected Type has no data?

As mentioned SO answer here you can update your code as follow. I hope it will fix your problem
<tbody>
<tr ng-repeat="rows in filteredData = ($ctrl.myData | filter: {Type: $ctrl.type} track by $index">
<td>
<span>{{rows.Type}}</span>
</td>
<td>
<span>...</span>
</td>
</tr>
<div ng-hide="filteredData.length">
NO DATA FOR THIS OPTION
</div>
</tbody>

Try: "rows in $ctrl.myData | filter: {Type: $ctrl.type} as filtered track by $index "
and under your table <div ng-if="!filtered.length">No results</div>
https://plnkr.co/edit/diNlE0lS8eFttvgBUHug?p=preview

find selected value of dropdown in every row of table

There are multiple rows in a table being created using ng-repeat. Each row has a dropdownlist. I want to get the selected value in a dropdown and attach that value with other corresponding values in the row in a string format using JavaScript or JQuery on click of Next button. eg:"one,B:two,B:three,A:four:C" (here in this example assuming B is selected for dropdown in first row,similar logic for other rows)
The below is the HTML snippet:
<div class="mainDiv" ng-controller="myController">
<div class="div1">
<table class="table myTable">
<thead>
<tr>
<th>
<center>serial</center>
</th>
<th>
<center>data</center>
</th>
<th>
<center>aplhabet</center>
</th>
</tr>
</thead>
<tbody class="myTableBody">
<tr ng-repeat="data in myData" id="{{$parent.$id+'-'+$index}}">
<td>{{$index + 1}}</td>
<td>{{data}}</td>
<td>
<select>
<option value="Select">-- Select --</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div class="div2">
<button type="button" class="btn btn-md btn-primary btnNext">Next</button>
</div>
</div>
and below is the angularJS part:
myApp.controller('myController', function ($scope) {
$scope.myData = ["one","two","three","four"];
});

Add an ng-model={ selectData[data] }
Then update the controller with the following
$scope.selectData = {}
getResults= function() {
var returnData = $scope.myData.map(function(data) {
return data + ',' + $scope.selectData[data];
});
return returnData.join(':');
};

Switch to an object.
$scope.myData = {
one: {
id: 'one',
value: null
},
two: {
id: 'two',
value: null
},
three: {
id: 'three',
value: null
},
four: {
id: 'four',
value: null
}
}
In your HTML, add an ng-model to your select
<select ng-model="data.value">
<!-- your options, because I'm lazy -->
</select>
You will get an object containing all you want. In my opinion, I find it easier to work with objects rather than arrays.

Angular select with ng-repeat loses selected option when options are updated

I am trying to create an editor for a dynamic list using AngularJS. For each item I would like to add a select list containing options for all elements in the list. When an item is added to the list (Add button in the JSFiddle), the other selects lose their values. The model is not affected by this, only the view. What am I missing?
Here is my JSFiddle.
View:
<div ng-controller="selectDemoCtrl">{{msg}}
<table>
<tr>
<td>id</td>
<td>references</td>
</tr>
<tr ng-repeat="item in items">
<td>
<input ng-model="item.id" type="number">
</td>
<td>
<select ng-model="item.ref">
<option ng-repeat="i in items" value="i.id" ng-selected="item.ref==i.id">{{i.id}}</option>
</select>
</td>
</tr>
</table>
<button ng-click="addItem()">Add</button>
<div>{{items | json}}</div>
</div>
Controller:
selectDemo.controller('selectDemoCtrl', function ($scope) {
$scope.items = [{
id: 1,
ref: 2
}, {
id: 2,
ref: 1
}];
$scope.addItem = function(){
var newitem = {id: 1, ref:1};
for (var i = 0; i < $scope.items.length; i++){
if ($scope.items[i].id >= newitem.id) { newitem.id = $scope.items[i].id + 1; }
}
if ($scope.items.length > 0){newitem.ref = $scope.items[0].id;}
$scope.items.push(newitem);
};
});

Don't use ngRepeat, it's not reliable for binding model. Use ngOptions instead, it should work as expected:
<select ng-options="i.id as i.id for i in items" ng-model="item.ref"></select>
Demo: https://jsfiddle.net/4bemy5wj/1/