Hide / Show Column depending on select - angularjs

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>

Related

Angular JS :How to capture the Selected value under Onchage

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

Passing two values in select dropdown using angularjs

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.

Angular.js setting ng-options with in ng-repeat

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

How to set selected value in each row in ng-repeat?

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"

AngularJs: How to bind a object with ng-options

I have implemented a drop down where i m trying to populate my drop down from database using ng-options but when the data comes it comes in a object which don't have key or value as you can see in image below.I have tried to use ng options as:-
by using ng-option
<tr>
<td nowrap>Billing Method:</td>
<td>
<select id="listBillingMethod" data-ng-options="blngmthod as blngmthod for blngmthod in listBillingMethod" ng-model="custom.listBillingMethod" style="width: 182px !important; height: 34px;"></select>
</td>
<td nowrap></td>
<td></td>
</tr>
If i am trying to do the same using ng-repeater it gives me results as i want,i.e my dropdown will populated up.My ng-repeater code:-
<tr>
<td nowrap>Billing Method:</td>
<td>
<select id="listBillingMethod" style="width: 182px !important; height: 34px;">
<option value="0">--- Select an option ---</option>
<option data-ng-repeat="blngmthod in listBillingMethod">{{blngmthod}}</option>
</select>
</td>
<td nowrap></td>
<td></td>
</tr>
My data comes in form of:-

look at this fiddle you should really use ng-options if ur Data Object has no keys than modify it so it fits for the ng-options example
fiddle
<form>
<select ng-model="group"
ng-options="o.value as o.label for o in myGroups"
ng-change="tellUs()"/>
</form>

Resources