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
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 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 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.