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.
Related
<div class="form-group">
Name <input type="text" class="form-control" placeholder="item" ng-model="shoppingItem.itemName" required>
</div>
<div class="form-group">
Image URL <input type="url" class="form-control" placeholder="item" ng-model="shoppingItem.imgUrl" required>
</div>
<div class="form-group">
<button type="button" class="btn btn-success" ng-click="save()" >Success</button>
</div>
app.controller('recipebookController',function($scope,$routeParams,RecipeService,$location){
$scope.shoppingItems =RecipeService.shoppingItems;
$scope.rp="Route parameter value"+RecipeService.shoppingItems[0].itemName;
$scope.save = function(){
RecipeService.save($scope.shoppingItem);
$location.path("/");
}
});
<div class="col-xs-12">
<ul class="list-group">
<li ng-repeat="item in shoppingItems"class="list-group-item text-center clearfix">
<span style="font-weight:bold">{{item.itemName}}</span>
<img ng-src="{{ item.imgUrl }}" width="40" height="40"/>`
</li>
</ul>
</div>
When I enter save, the new data is saving row wise perfectly and displaying but when I re-enter new value into the input. The previously save value get changes as I type.
The issue that you're facing is that when you call RecipeService.save($scope.shoppingItem);, the RecipeService is saving the reference to your scope variable.
So, instead of assigning the variable directly, I might try doing something like this:
RecipeService.save(angular.copy($scope.shoppingItem));
This will create a new copy of the object referenced by $scope.shoppingItem and will allow you to edit one of those objects without affecting the other.
I want my button to display only when one of the options is selected in the select area.
<div class="row" ng-controller='ctrl1'>
<div class ="form_group">
<select class="form-control" ng-options='item as item.hotel_name for item in hotels.data' ng-model='current_Hotel' ng-click="selectHotel()"><option value="" selected disabled>Choose a hotel</option>
</select>
</div>
<div class="col-md-6">
<h1>{{current_Hotel.hotel_name}}</h1>
<p>{{current_Hotel.hotel_description}}</p>
<img class="img img-responsive" ng-src="{{current_Hotel.image_url}}">
<btn class="btn btn-primary">Book a room </btn>
</div>
</div>
I tried using ng-show and ng-hide but it didn't worked as I wanted.
use ng-if directive with multiple conditions
<div class="col-md-6" ng-if="current_Hotel && current_Hotel != ''">
<h1>{{current_Hotel.hotel_name}}</h1>
<p>{{current_Hotel.hotel_description}}</p>
<img class="img img-responsive" ng-src="{{current_Hotel.image_url}}">
<btn class="btn btn-primary">Book a room </btn>
</div>
ng-show or ng-hide should work based on the value of the ng-model that you have assigned when an option is choosen, supposing that you are working in the same scope.
Have you tried ng-show="current_Hotel !== ''"?
ngmodel for select will be set when option is selected, you need to check if model is selected or not
<div class="row" ng-controller='ctrl1'>
<div class ="form_group">
<select class="form-control" ng-options='item as item.hotel_name for item in hotels.data' ng-model='current_Hotel' ng-click="selectHotel()"><option value="" selected disabled>Choose a hotel</option>
</select>
</div>
<div class="col-md-6">
<h1>{{current_Hotel.hotel_name}}</h1>
<p>{{current_Hotel.hotel_description}}</p>
<img class="img img-responsive" ng-src="{{current_Hotel.image_url}}">
<btn ng-show="current_Hotel" class="btn btn-primary">Book a room </btn>
</div>
</div>
I am developing simple ionic app which have a table showing Mobile phones models and i have drop down list to filter the table according to selected option i made it like this but i do not why i does not work.
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon">
</i>
<input ng-model="searchValue" placeholder="Search" type="text">
</input>
</label>
<label class="item item-input item-select">
<div class="input-label">
brand
</div>
<select ng-model="chosenBrand">
<option>
Nokia
</option>
<option selected="">
Samsung
</option>
<option>
Apple
</option>
<option>
Sony
</option>
</select>
</label>
</div>
<div class="row header">
<div class="col table-colmun">
<h5>
Brand
</h5>
</div>
<div class="col table-colmun">
<h5>
Model
</h5>
</div>
<div class="col table-colmun">
<h5>
Year
</h5>
</div>
</div>
<div class="row" ng-repeat="mobile in mobilesArray |filter:chosenBrand" ng-click="selectItem(mobile, $index)" ng-class="{'selected':$index == selectedRow}">
<div class="col table-colmun">
{{mobile.brand}}
</div>
<div class="col table-colmun">
{{mobile.model}}
</div>
<div class="col table-colmun">
{{mobile.year}}
</div>
</div>
when i select an option it gives me a blank table with now data at all however when i write {{chosenBrand}} in the view it shows the selected option.
As rightly pointed out, You need to have a value for the options.
Also instead of manually using these options you can use the ng-options directive.
like this <select ng-options="brand.brandName for brand in brands" ng-model="chosenBrand"></select>
with a brand array like
[
{brandId:1,brandName:'Nokia'},
{brandId:2,brandName:'Apple'},
{brandId:3,brandName:'Samsung'},
{brandId:4,brandName:'Sony'},
]
---EDIT---
So when using ng-options if you fon't use as the options have values 1,2,3 and so on. instead use this
<select ng-options="brand.brandName as brand.brandName for brand in brands" ng-model="chosenBrand"></select>
Check out this fiddle
I'm working on an AngularJS project and in one of my views I have a table that will have pagination implemented on it. I want the controls for the pagination to be as follows:
Stacked horizontally, to have a Previous button, a text indicating the page of total of pages, and a Next button.
A select containing the number of elements per page desired to visualize on the table, and a text just saying "elements per page"
A text input to enter the number of page, and a Go to button that will load the indicated page.
All of these have to be sorted horizontally.
I defined this components like this in my view:
<div class="container">
<div class="row">
<div class="col-md-6">
<ul class="pagination pagination-sm">
<li >Anterior</li>
<li ><a>1 de 10 páginas</a></li>
<li>Siguiente</li>
</ul>
</div>
<div class="col-md-3">
<select class="form-control" ng-model="uc.defaultSelect" ng-options="n for n in uc.elementsPerPage" ></select>
<label>elementos por página</label>
</div>
<div class="col-md-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Ir a página..." />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Ir</button>
</span>
</div>
</div>
</div>
</div>
But the end result I'm getting looks like this
The nav buttons look completely off line, the select is too big and it's pushing the label to a new line, the one that looks fine is the go to page input.
What kind of styling can I use with Bootstrap to achieve the look I desire?
In the end I had to give up on using the paginationstyle and changed to button-group, I removed some labels and ended up with this:
<div class="container">
<div class="row">
<div class="col-md-6 btn-group">
<button type="button" class="btn btn-default" ng-click="uc.previousPage()">Anterior</button>
<a class="btn btn-default disabled">1 de 10 páginas</a>
<button type="button" class="btn btn-default" ng-click="uc.nextPage()">Siguiente</button>
</div>
<div class="col-md-3">
<select class="form-control form-control-sm" ng-model="uc.defaultSelect" ng-options="n as (n + ' por página') for n in uc.elementsPerPage" ></select>
</div>
<div class="col-md-3">
<div class="input-group">
<input type="text" ng-model="uc.page" class="form-control" placeholder="Ir a página..." />
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="uc.goToPage()">Ir</button>
</span>
</div>
</div>
</div>
</div>
Now I get this in my view:
I can just add some color to it if as necessary and I just got a pretty looking pagination toolbar.
in the following code I have one drop-down list (serviceSmallId) for type of service.
It is populated using model info.
There is a second field check-box which should only be visible when drop-down has a selected value of 'Weekly'. I am trying to use ng-show/ hide of angular.
I tried to search for possible solutions but no luck.
Can anyone please guide me what I am doing wrong.
<section id="scrubber-view" class="mainbar" data-ng-controller="scrubber as vm">
<section class="matter">
<div class="container">
<div>
<button class="btn btn-info" ng-click="vm.goBack()"><i class="fa fa-arrow-left"></i>Back</button>
<button class="btn btn-info" ng-click="vm.cancel()" ng-disabled="!vm.canSave"><i class="fa fa-undo"></i>Cancel</button>
<button class="btn btn-info" ng-click="vm.save()" ng-disabled="!vm.canSave"><i class="fa fa-save"></i>Save</button>
<span ng-show="vm.hasChanges" style="color:orange" class="dissolve-animation ng-hide"><i class="fa fa-asterisk"></i></span>
</div>
<div class="row">
<div class="widget wblue">
<div data-cc-widget-header title="{{vm.title}}" subtitle="{{vm.scrubber.scrubberId}}"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="serviceSmallId" class="col-sm-2">Service</label>
<div class="col-sm-4">
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']">
</select>
</div>
</div>
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
<input class="form-control" type="checkbox" id="fullyFlanged" value="Bar" />
</div>
</form>
</div>
</div>
</div>
</section>
</section>
There probably is a more elegant "angular way" solution,
but I updated you code to work here - http://jsbin.com/tupisoriho/1/edit?html,js,output
Explanation of changes
Provided ng-show a value vm.checker
added ng-change to the select element and gave it a function checkerGo which tested to see if dropdown == 'weekly', if yes change vm.checker
Update
there is a more "angular way" - using expressions!
As per #Omri Aharon fiddle/comment below.
You don't need to get the value property because a ng-model don't hold the element but the value itself;
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
must be
<div class="form-group" ng-show="vm.scrubber.serviceSmallId == 'Weekly'">
EDIT: In your case vm.scrubber.serviceSmallId will contain the ID and not the description Weekly. I suggest you to use ng-change directive to call a function in your controller that will find the item based on ID and set in the controller to be visible for ng-show.
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']"
ng-change="vm.selectObj()">
vm.selectObj() will find and set the current selected object in the scope to an controller variable (ex.: vm.selectedItem) and:
<div class="form-group" ng-show="vm.selectedItem.description=='Weekly'">