I have option and input field:
<div data-ng-repeat="person in persons">
<select ng-model="person.username" ng-options="item as item.username for item in usernames" ng-change="fillInput()"></select>
<input type="text" ng-model="person.house" readonly="" required="">
<div ng-if="person.username">Full selected user info : {{ person.username | json}}</div>
</div>
I want to set input variable every time option is chosen.
Here is fiddle. It works fine if I remove data-ng-repeat="person in persons" But I need to be able to add few option fields.
Try this below code
<div ng-app="myApp" ng-controller="DemoCtrl">
<br><br>
<button ng-click="addNewChoice()">Add User</button>
<div data-ng-repeat="person in persons">
<select ng-model="person.username" ng-options="item as item.username for item in usernames" ng-change="fillInput()"></select>
<input type="text" ng-model="person.username.hname" readonly="" required="">
<div ng-if="person.username">Full selected user info : {{ person.username | json}}</div>
</div>
</div>
The change is in the below line
<input type="text" ng-model="person.username.hname" readonly="" required="">
You were referencing to invalid value. The variable person.username was not pointing anywhere and hence it was not working.
<div ng-app="myApp" ng-controller="DemoCtrl">
<br><br>
<button ng-click="addNewChoice()">Add User</button>
<div data-ng-repeat="person in persons">
<select ng-model="selectedPerson" ng-options="item as item.username for item in usernames" ng-change="fillInput()"></select>
<input type="text" ng-model="selectedPerson.hname" readonly="" required="">
<div ng-if="selectedPerson">Full selected user info : {{ selectedPerson | json}}</div>
</div>
</div>
Try this! http://jsfiddle.net/xr82a1gL/18/
Related
Does anyone know why angular does not update the file in the browser? I try to use the incognito also same. the file recently I update not reflect on the browser. ng-repeat.
the HTML:
<body ng-app="cgpaCalculator">
<div class="card" ng-controller="cgpaCtrl">
[...]
<div class="row" ng-repeat="number in data.rows track by $index">
<div class="col-lg-5 mb-2">
<div class="form-label-group">
<input type="text" name="course_name" id="course_name" class="form-control" placeholder="Course Name [Optional]">
<label for="course_name">Course Name [Optional]</label>
</div>
</div>
<div class="col-lg-3 mb-2">
<div class="form-label-group">
<select class="form-control custom-select" ng-model="data.rows[$index].grade" ng-options="grade for grade in grades track by grade">
<option value="" disabled selected>Select Grade</option>
</select>
</div>
</div>
</div>
The Controller:
I don't know what i'm doing wrong.
I have a select box in that few values which is based on the selection i need to show the labels of the textbox.
ex: if you selected
the SE means I need to show the Location2 and Reporting To label box.
If you are selecting MANAger means need to show only Location2 label text
box only. And if you are selecting ADM/cluster, any one from this means need to be display only Location alone.
Js file
$scope.ChangeRole = function(id){
roleid=$scope.Role;
if(id=="2"){
// alert(id);
$scope.showreport =true;
$scope.showreportlocation=true;
$scope.showlocation = false;
}else if(id=="3"){
$scope.showreportlocation = true;
$scope.showreport = false;
$scope.showlocation = false;
}else{
$scope.showreport = false;
$scope.showreportlocation = false;
$scope.showlocation = true;
}
}
HTML file
<div class="col-lg-6">
<div class="form-group">
<label>Role<span style="color:red">*</span></label>
<div class="input-group role">
<select placeholder="Role" ng-model="Role" class="form-control pull-right" ng-change="ChangeRole(Role);" required ng-init="selectedType()" id="selectType"" name="role" required>
<option value="0">Role</option>
<option value="1">ADM</option>
<option value="2">SE</option>
<option value="3">MANA</option>
<option value="4">ClUSTER</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group" ng-show="showlocation">
<label>Location<span style="color:red">*</span></label>
<div class="input-group location">
<select id="LocationInput" class="form-control" ng-model="LocationId" ng-options="location.Id as location.NameoftheLocation for location in locations" required>
<option id="OptionInput" value="">Location</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
<div class="col-md-6" ng-show="showreportlocation">
<div class="form-group">
<label>Location2<span style="color:red">*</span></label>
<div class="input-group site">
<select data-placeholder="Location" style="width: 100%;" ui-select2="select2Options" class="form-group" multiple ng-model="selectedTags" required>
<option ng-repeat="tag in tags" value="{{tag.Id}}">{{tag.NameoftheLocation}}</option>
</select>
<div class="input-group-addon">
<i class="fa fa-map"></i>
</div>
</div>
</div>
</div>
<div class="col-lg-6" id="otherType" ng-show="showreport">
<div class="form-group">
<label>Reporting To<span style="color:red">*</span></label>
<div class="input-group">
<select class="form-control" id="reportingto" name="reportingto" ng-options="n.Id as n.Name for n in names" ng-model="ReportingTo" required>
<option value="">Reporting To</option>
</select>
<div class="input-group-addon">
</div>
</div>
</div>
</div>
Here I have given the required option for all but which is not allowing me to save because required is present.
Using ng-show for particular selection I hide that label, but while saving html will check that field also, which is wrong please let me know that how to do.
Please some make the fiddle and let me know,
Use ng-required instead and only require it when it is shown.
I also tested Casey's suggestion of using ng-if instead of ng-show and that works as well. https://plnkr.co/edit/eeKvz5zRFeuLSF6fDbuy?p=preview
I have a group of dropdown options, each of which have a list of values. I am trying to get the names of each of those to sort in alphabetical order. Below is the code.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div>
<form class="form-horizontal">
<div class='form-horizontal range-date'>
<div class="input-daterange input-group text-center" id="datepicker">
<input class="pull-right date-size" name="startDate" type="text" placeholder="Start" class="form-control ">
<span class="input-group-addon">To</span>
<input class="pull-left date-size" name="endDate" type="text" placeholder="End" class="form-control">
</div>
</div>
<div id='query_messages' class='alert alert-danger'></div>
<div ng-repeat="item_query in items_query">
<div class="form-group">
<label class="control-label col-lg-2 pad-o">
<span ng-bind="Label{{item_query}}"></span>
</label>
<div class="col-lg-10" ng-if="item_query!=12">
<select ng-model="queryParam[item_query]" ng-options="item.name for item in optionsParam{{item_query}} track by item.id | orderBy: 'item.name'"
ng-change="change(queryParam[item_query])"
ng-attr-id="query_select{{item_query}}" class="selectpicker class_id{{item_query}} "
multiple data-selected-text-format="count>0" title='Choose any of the following'
data-queue-watcher>
</select>
</div>
<div class="col-lg-10" ng-if="item_query==12">
<select ng-model="queryParam[item_query]" ng-options="item.name for item in optionsParam{{item_query}} track by item.id | orderBy: 'item.name'"
ng-change="change(queryParam[item_query])"
ng-attr-id="query_select{{item_query}}" class="selectpicker class_id{{item_query}} "
multiple data-selected-text-format="count>0" title='Choose one of the following'
data-queue-watcher>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
I am trying to show a div depending on what is selected from the drop down list. For example, if a user selects 'Cash' from the list show Cash div or if the user select 'Check' from the list show Check div
I have put together sample but its incomplete and needs to wire-up
http://jsfiddle.net/abuhamzah/nq1eyj1v/
Also when the user change the selection I would also like to clear the previous selection so when the user goes back to the previous selection they should not see.
<div ng-controller="MyCtrl">
<div class="col-xs-12">
<label class="col-xs-6 control-label">Type:</label>
<div class="col-xs-6">
<select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme()" >
<option ng-option value="Cash">Cash</option>
<option ng-option value="Check">Check</option>
<option ng-option value="Money Order">Money Order</option>
</select>
</div>
</div>
<div class="col-xs-12" id="cash">
<div >
<label class="col-xs-6 control-label">Cash :</label>
<div class="col-xs-6">
<input type="number" class="form-control" ng-model="payment.cash" />
</div>
</div>
</div>
<div class="col-xs-12" id="check">
<div >
<label class="col-xs-6 control-label">check :</label>
<div class="col-xs-6">
<input type="number" class="form-control" ng-model="payment.check" />
</div>
</div>
</div>
<div class="col-xs-12" id="money_order">
<div >
<label class="col-xs-6 control-label">money_order :</label>
<div class="col-xs-6">
<input type="number" class="form-control" ng-model="payment.money_order" />
</div>
</div>
</div>
</div>
//controller:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.changeme = function() {
alert('here');
}
}
you didnt initialize as the angular app coz u missed the ng-app directive first
and this is the solution using ng-if
DEMO
<div ng-app="myApp" ng-controller="MyCtrl"> // initialize as a angular app
<div class="col-xs-12" id="cash" ng-if="payment.type == 'Cash'"> // this div will show if the value of `payment.type` model equals to `cash`. and so on.
In AngularJS, how do I get the selected option from a select element to put it somewhere else on the page?
<div class="modal-body">
<form class="">
<div class="control-group">
<label class="control-label" for="role">Choose a Playlist</label>
<div class="controls">
<select name="playlist">
<option ng-repeat="playlist in playlists | orderBy: 'playlist'" value="{{playlist.id}}">{{ playlist.name }}</option>
</select>
</div>
</div>
<p>
Or,
<a class="branded" href="#">Create New Playlist</a>
</p>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-branded" ng-click="postSongToPlaylist();">Save</button>
</div>
I want to get the option the user selects in the select element and put it as the parameter for the ng-click. How do I get Angular to "know" which option is the right one?
The value will be stored in the scope as the name you give to ng-model for the select tag.
<div class="modal-body">
<form class="">
<div class="control-group">
<label class="control-label" for="role">Choose a Playlist</label>
<div class="controls">
<select name="playlist" ng-model="playlist" ng-options="playlist.id as playlist.name for playlist in playlists | orderBy: 'playlist'">
</select>
</div>
</div>
<p>
Or,
<a class="branded" href="#">Create New Playlist</a>
</p>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-branded" ng-click="postSongToPlaylist(playlist);">Save</button>
</div>
I would also suggest that you use ng-options instead of ng-repeat to populate your option tags.