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>
Related
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 have code like this:
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
<INPUT TYPE="CHECKBOX" NAME="processed" id="processed"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.processed"
ng-click="changeProcessedStatus(x.id, x.processed)">上菜/未上菜
<P>
</div>
<div class="col left">
<INPUT TYPE=CHECKBOX NAME="paid" id="paid"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.paid"
ng-click="changePaidStatus(x.id, x.paid)">付款/未付款
<P>
</div>
</div>
When I click checkbox "processed", it works fine (changeProcessedStatus function is called). But when I click checkbox "paid", since the record is defined to be filtered, changePaidStatus function is not called.(I don't know why) when I remove ng-repeat filter, changePaidStatus function is called normally.
How can I solve this problem? Thanks.
The order of execution of ng-click and ng-model is ambiguous. Instead you should use ng-change to ensure that you obtain the correct values of the model variable:
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
<INPUT TYPE="CHECKBOX" NAME="processed" id="processed"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.processed"
ng-change="changeProcessedStatus(x.id, x.processed)">上菜/未上菜
<P>
</div>
<div class="col left">
<INPUT TYPE=CHECKBOX NAME="paid" id="paid"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.paid"
ng-change="changePaidStatus(x.id, x.paid)">付款/未付款
<P>
</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.
<form name="companyProfileForm" autocomplete="false" novalidate ng-submit="OnSaveCompanyProfile(companyProfileForm.$valid)" ng-controller="companyProfileDataEntryController">
<section ng-hide="!IsCompanyKnown();" class="row">
<div class="small-12 medium-6 large-6 columns">
<!--Industry-->
<section class="row">
<div class="small-12 medium-12 large-12 columns" ng-class="{ 'has-error' : (companyProfileForm.Industry.$invalid && submitted) }">
<div class="form-group">
<label for="Industry">*Industry</label>
<select name="Industry"
ng-model="CompanyProfileModel.IndustryId"
ng-options="item.Id as item.Description for item in IndustryList"
required>
<option value=null>-- select an industry --</option>
</select>
<span class="help-block" ng-show="companyProfileForm.Industry.$invalid && submitted">Please select a value.</span>
</div>
</div>
</section>
</div>
</section>
<button></button>
</form>
No matter what I do this form will evaluate to true. I want it to throw an error that Industry is required. Upon submit it goes to a function that prints to the console the parameter. It prints true every time.
You need to use the AngularJS ng-required directive, not required. Change the select element required to ng-required="true":
<select name="Industry" ng-model="CompanyProfileModel.IndustryId" ng-options="item.Id as item.Description for item in IndustryList" ng-required="true">
<option value=null>-- select an industry --</option>
</select>
Using 'required' on a form element will work in angular so long as your form element has an ng-submit="action()" and a button EXACTLY as follows inside the form:
<button type='submit' ng-click='submit()'>SomeText</button>
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.