I'm trying to set the correct select option based on a value in the ng-repeat.
See example here: https://jsfiddle.net/vok080z4/5/
Crazy, if you view the example, why is dave set to apples, but no one else is?
<body ng-app="eApp">
<div ng-controller="splitsController" ng-cloak>
<table class="widefat fixed" cellspacing="0">
<thead class="thead">
<tr>
<th>Name</th>
<th>Fruit</th>
</tr>
</thead>
<tbody class="tbody">
<tr ng-repeat="order in data.orders" ng-class-odd="'alternate'">
<td>{{order.name}}</td>
<td>
<select ng-model="fruitSelect">
<option value="">-- Select One --</option>
<option ng-repeat="fruit in data.fruits track by fruit.id" value="{{fruit.id}}" ng-selected="fruit.id === order.fruitId">
{{fruit.name}}
</option>
</select>
</td>
<td>
</tr>
</tbody>
</table>
</div>
</body>
You should use ngOptions to generate select options and more important use ngModel to persist the selected value.
<select ng-model="order.fruitId" ng-options="item.id as item.name for item in data.fruits">
<option value="">-- Select One --</option>
</select>
DEMO
Related
I have a table which can be filtered by several columns. The filter is strict. When the data is initiated, it shows all values. However, after filtering by some column and getting back to empty option to show all values, it shows an empty table. How to apply a strict filter only to non-empty values?
<select
ng-model="search.column1">
<option value=''></option>
<option ng-repeat="e in vm.getExample value="{{e.column1}}">{{e.column1}}</option>
</select>
<select
ng-model="search.column2">
<option value=''></option>
<option ng-repeat="e in vm.getExample value="{{e.column2}}">{{e.column2}}</option>
</select>
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr ng-repeat="e in vm.getExample | filter:search:true">
<td>{{ e.column1 }}</td>
<td>{{ e.column2 }}</td>
<tr>
</table>
Your issue was in the use of filter:
You should change filter:search:true to filter:search.
The third parameter the filter is a comparator. In this case, you don't need it:
Comparator which is used in determining if values retrieved using
expression (when it is not a function) should be considered a match
based on the expected value (from the filter expression) and actual
value (from the object in the array).
If you want to learn more a bit about comparators, I recommand you to read this excellent answer (SO).
Working snippet of your code:
var app = angular.module('testApp', []);
app.controller('testController', ['$scope', function($scope) {
this.getExample = [{
'column1': 1,
'column2': 2
}, {
'column1': 3,
'column2': 4
}, {
'column1': 5,
'column2': 6
}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testController as vm">
<select ng-model="search.column1">
<option value=''></option>
<option ng-repeat="e in vm.getExample" value="{{e.column1}}">{{e.column1}}</option>
</select>
<select ng-model="search.column2">
<option value=''></option>
<option ng-repeat="e in vm.getExample" value="{{e.column2}}">{{e.column2}}</option>
</select>
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr ng-repeat="e in vm.getExample | filter:search">
<td>{{ e.column1 }}</td>
<td>{{ e.column2 }}</td>
<tr>
</table>
</div>
Created custom filter in controller:
$scope.filterMyData = function (input, searchParam) {
if (searchParam == '')
return true;
return angular.equals(input, searchParam);
}
And changed to:
<tr ng-repeat="e in vm.getExample | filter:search:filterMyData">
On the drop down change i am trying to capture the selected value .
This is my code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="FirstCtrl">
<table border="1">
<tr>
<th ng-repeat="(key, val) in collectioninfo[0]">
<span ng-if="allDropDownsHere.indexOf(key)>=0">
<select ng-change="getchange()" >
<option>{{key}}</option>
<option ng-repeat="(k, v) in val[0]" value="{{v}}">{{k}}</option>
</select>
</span>
<span ng-if="allDropDownsHere.indexOf(key)<0">
{{ key }}
</span>
</th>
</tr>
<tr ng-repeat="row in collectioninfo">
<td ng-repeat="(key2, val2) in row">
<span ng-if="allDropDownsHere.indexOf(key2)>=0">
{{ getFirstKeyOfDropDown(val2) }}
</span>
<span ng-if="allDropDownsHere.indexOf(key2)<0">
{{ val2 }}
</span>
</td>
</tr>
</table>
</div>
When i kept ng-change="getchange()" , it is expecting ng-model and ng-model leads to empty headers
This is my fiddle
http://jsfiddle.net/sD7X9/28/
Could you please let me know how to get the selected value ??
first thing is you can't use ng-change without ng-model. In order keep the select box value and avoid empty header, you can assign a value to ng-model using ng-init
<select ng-change="getchange(selectItem)" ng-model="selectItem" ng-init="selectItem = key">
<option>{{key}}</option>
<option ng-repeat="(k, v) in val[0]" value="{{v}}">{{k}}</option>
</select>
Demo
Your <select> doesn't have an ng-model which is required (you'd knew had you seen your console errors).
<select ng-change="getchange(dropdownvalue)" ng-model="dropdownvalue">
<option ng-selected="true">{{key}}</option>
<option ng-repeat="(k, v) in val[0]" value="{{v}}">{{k}}</option>
</select>
And, in controller,
$scope.getchange = function(value) {
alert(value)
}
working fiddle
I want to pass two values in select dropdown.
Here is my code.
<tbody>
<tr ng-repeat="x in studyTeamObj" align="center">
<td>
<select class="form-control" ng-model="x.Designation">
<option value=""></option>
<option ng-repeat="x in createStudyObj.Study_User"
value="{{x.Designation}}">{{x.Emp_Name}}
</option>
</select>
</td>
<td>
{{x.Emp_Id}}
</td>
<td>
{{x.Designation}}
</td>
<td class="mdrf-add-row-col">
<i class="fa fa-minus-circle"
data-ng-click="deleteMem($index)"></i>
</td>
</tr>
</tbody>
This is what the data I am getting from {{createStudyObj.Study_User}}
[{"Emp_Name":"mdrf","Emp_Id":2,"Designation":"Research Dietitian","DesignationID":20},{"Emp_Name":"Sudha","Emp_Id":1045,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1046,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1047,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1048,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1049,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"fdgedd","Emp_Id":1050,"Designation":"MDRF HOD","DesignationID":16}]
when I click on emp name from the dropdown,it should fetch Emp_Id and Designation.But I am getting only the Designation.Plz help
Assign object to value instead of one property. That's way whole object bind to ng-model and you can filter relevant properties from that.
<option ng-repeat="x in createStudyObj.Study_User"value="{{x}}">{{x.Emp_Name}}
</option>
The downfall of this is when u access the model variable from the controller value assign as string. so you need to parse the value to object using JSON.parse()
$scope.designation = JSON.parse($scope.designation)
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.createStudyObj = {};
$scope.createStudyObj.Study_User = [{"Emp_Name":"mdrf","Emp_Id":2,"Designation":"Research Dietitian","DesignationID":20},{"Emp_Name":"Sudha","Emp_Id":1045,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1046,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1047,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1048,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1049,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"fdgedd","Emp_Id":1050,"Designation":"MDRF HOD","DesignationID":16}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tbody>
<tr >
<td>
<select class="form-control" ng-model="designation">
<option value=""></option>
<option ng-repeat="x in createStudyObj.Study_User"
value="{{x}}">{{x.Emp_Name}}
</option>
</select>
</td>
<td>
{{designation}}
</td>
<td class="mdrf-add-row-col">
<i class="fa fa-minus-circle"
data-ng-click="deleteMem($index)"></i>
</td>
</tr>
</tbody>
</table>
</div>
But I recommend to use ng-options instead of the ng-repeat
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.createStudyObj = {};
$scope.createStudyObj.Study_User = [{"Emp_Name":"mdrf","Emp_Id":2,"Designation":"Research Dietitian","DesignationID":20},{"Emp_Name":"Sudha","Emp_Id":1045,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1046,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1047,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1048,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1049,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"fdgedd","Emp_Id":1050,"Designation":"MDRF HOD","DesignationID":16}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tbody>
<tr >
<td>
<select class="form-control" ng-model="designation" ng-options="item as item.Emp_Name for item in createStudyObj.Study_User">
<option value=""></option>
</select>
</td>
<td>
{{designation}}
</td>
<td class="mdrf-add-row-col">
<i class="fa fa-minus-circle"
data-ng-click="deleteMem($index)"></i>
</td>
</tr>
</tbody>
</table>
</div>
You should be using ng-options instead of building your own options list. https://docs.angularjs.org/api/ng/directive/ngOptions
If you have problems with that, add those questions up top and I will update my answer.
I am using ng-repeate in my table for building rows.
In each row i have select. In each select i want to select one of the options according to my $scope.vehicles.
This is an HTML:
<div ng-app="MyApp" ng-controller="MyController">
<div id="vehicleDetails">
<table id="tblVehicles">
<tr>
<th>Number</th>
<th>Model</th>
</tr>
<tr class="vehiclesRepeat" ng-repeat="vehicle in vehicles">
<td>{{vehicle.PlateID}}</td>
<td>
<select required ng-model="vehicles.ModelID" id="vehicleModel" class="txtPersonalDetails" ng-options="m.description for m in models" >
<option value="">Select Value</option>
</select>
</td>
</tr>
</table>
</div>
</div>
This is JS:
angular.module('MyApp',[])
.controller('MyController',function($scope) {
$scope.vehicles=[{"PlateID":"55533322","ModelDescription":"OPEL","ColorDescription":"blue","ModelID":194,"ColorID":13},{"PlateID":"66688822","ModelDescription":"Mercedes","ColorDescription":"blue","ModelID":238,"ColorID":13}];
$scope.models=[{"iD":35,"description":"BMV"},{"iD":193,"description":""},{"iD":194,"description":"OPEL"},{"iD":214,"description":"Toyota"},{"iD":215,"description":"Honda"},{"iD":238,"description":"Mercedes"},{"iD":260,"description":"Houndai"}];
});
I build the dropdowns but i can not set selected value in each dropdown.
JSFiddle: https://jsfiddle.net/ndprdffa/
Does somebody can help?
Thanks!
Use this
<div ng-app="MyApp" ng-controller="MyController">
<div id="vehicleDetails">
<table id="tblVehicles">
<tr>
<th>Number</th>
<th>Model</th>
</tr>
<tr class="vehiclesRepeat" ng-repeat="vehicle in vehicles">
<td>{{vehicle.PlateID}}</td>
<td>
<select required ng-model="vehicle.ModelDescription" id="vehicleModel" class="txtPersonalDetails" ng-options="m.description as m.description for m in models" >
</select>
</td>
</tr>
</table>
</div>
</div>
Please refer the fiddle "https://jsfiddle.net/ndprdffa/1/".
Explaination
As the docs explains, when you use an expression such as
label for value in array
what is displayed in the select box is label, and what is bound to the ngModel is value. So, in your expression:
ng-model="vehicle.ModelDescription"
ng-options="m.description for m in models"
mis one of the objects in the array of models. And if you want the object to be the one selected in the select box, your ngModel should be a reference to this object not only the value
Or, if you want the ngModel to contain the string value of vehicle.ModelDescriptionand not the object containing this value, the expression should be
ng-options="m.description as m.description for m in models"
I use ng-hide and a selectbox to hide/show columns of my table .
HTML
<div ng-controller="MyCtrl">
<table>
<tbody>
<tr>
<td ng-hide="myOption=='one'"><input ng-hide="myOption=='one'"></input></td>
<td ng-hide="myOption=='one' || myOption=='two' "><input ng-hide="myOption=='one' || myOption=='two' "></input></td>
</tr>
</tbody>
</table>
<select ng-model="myOption">
<option value="one">test1</option>
<option value="two">test2</option>
<option value="three">test3</option>
</select>
</div>
It works well.
Here is a fiddle to demonstrate it: Fiddle
Question
How can I clear the values of the hidden input to avoid errors in my calculation? In jQuery i know the solution, but I want to learn AngularJS
You can use ng-change="[second='', first='']" to clear out the input fields, otherwise if you want more functionality to be done at the time of on-change use a function call at ng-change="someFunction()"
simply if you want to clear the input field which you have shown in jsfiddle you can try this
Working Code
<div ng-controller="MyCtrl">
<table>
<tbody>
<tr>
<td ng-hide="myOption=='one'"><input ng-model="first" ng-hide="myOption=='one'"></input></td>
<td ng-hide="myOption=='one' || myOption=='two' "><input ng-model="second" ng-hide="myOption=='one' || myOption=='two' "></input></td>
</tr>
</tbody>
</table>
<select ng-model="myOption" ng-change="[second='', first='']">
<option value="one">test1</option>
<option value="two">test2</option>
<option value="three">test3</option>
</select>
</div>