In My Code I used simple dropdown bind with option using ng-repeat but when I bind that, it display nothing due to some extra class enabled may be in javascript. My normal code is :
<div class="col-md-6 col-sm-12">
<label>Select Employee</label>
<select class="form-control show tick" id="selectEmp" name="toEmployeeCode" required="" ng-model="toEmployeeCode">
<option value="">Select Team Member</option>
<option ng-repeat="x in AllEmployee" value="{{x.EmployeeCode}}">{{x.FirstName}} {{x.MiddleName}} {{x.LastName}}</option>
</select>
</div>
But when it load display
<div class="btn-group bootstrap-select form-control tick">
<button type="button" class="btn dropdown-toggle bs-placeholder btn-round
btn-simple" data-toggle="dropdown" role="button" data-id="selectEmp"
title="Select Team Member" aria-expanded="false">
<span class="filter-option pull-left">Select Team Member</span>
<span class="bs-caret"><span class="caret"></span></span>
</button>
<div class="dropdown-menu" role="combobox">
<ul class="dropdown-menu inner" role="listbox" aria-expanded="false">
<li data-original-index="0" class="selected">
<a tabindex="0" class="" data-tokens="null" role="option" aria-
disabled="false" aria-selected="true">
<span class="text">Select Team Member</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
<li data-original-index="1">
<a tabindex="0" class="" data-tokens="null" role="option" aria-
disabled="false" aria-selected="false">
<span class="text ng-binding"> </span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
<select class="form-control show tick ng-pristine ng-untouched ng-
invalid ng-invalid-required" id="selectEmp" name="toEmployeeCode"
required="" ng-model="toEmployeeCode" tabindex="-98" aria-
required="true">
<option value="">Select Team Member</option>
<option ng-repeat="x in AllEmployee" value="EMP-1004" class="ng-
binding ng-scope">ABC</option>
<option ng-repeat="x in AllEmployee" value="EMP-1007" class="ng-
binding ng-scope">PQR</option>
<option ng-repeat="x in AllEmployee" value="EMP-1008" class="ng-
binding ng-scope">ASD</option>
<option ng-repeat="x in AllEmployee" value="EMP-1009" class="ng-
binding ng-scope">ZXC</option>
<option ng-repeat="x in AllEmployee" value="EMP-1010" class="ng-
binding ng-scope">HUK</option>
</select>
</div>
But it does not work when i use my code it will not display
I use angularjs
var app = angular.module('App', ['ui.router','ui.bootstrap']);
Don't use ng-repeat in <option>, it works incorrectly. Use ng-options in select instead.
Stop ng-repeating options: use ng-options
Related
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 need to change the caption of the button based on the value of multiple model values. i have a button. when the model values are null, it should display "Load" and if not then "refresh". If i check with one model value it works fine. How do i check entire model values.
<button id="load" type="submit" class="btn btn-success" style="float:right" > {{processState.widgetInstance.configuration.application ? 'Refresh':'Load'}}</button>
<ul>
<li>Application:
<select name="application" required ng-model="processState.widgetInstance.configuration.application" ng-options="app.APP_ID as app.APP_NAME for app in applications">
</select>
</li>
<li>Namespace:
<select name="namespace" required ng-model="processState.widgetInstance.configuration.namespace" ng-options="namespace.NAMESPACE_ID as namespace.NAMESPACE for namespace in namespace">
</select>
</li>
</ul>
In this case, if the select combo has values, it should display refresh else load. the values for the scope variables are populated from a service in this case.
Plunker
Working Copy
Just use parenthesis and && operator
angular.module("app",[]).controller("ctrl", function($scope){
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button id="load" type="submit" class="btn btn-success" style="float:right" > {{(application && namespace) ? 'Refresh':'Load'}}</button>
<ul>
<li>Application:
<input ng-model="application" type="text"/>
</li>
<li>Namespace:
<input ng-model="namespace" type="text"/>
</li>
</ul>
</div>
you can use angular form validation http://plnkr.co/edit/UZIqF2qG4UyNdbH4NSHu?p=preview
<button id="load" type="submit" class="btn btn-success" style="float:right"> {{ myform.$valid ? 'Refresh': 'Load' }}</button>
<form name='myform'>
<ul>
<li>Application:
<select name="application" required ng-model="processState.widgetInstance.configuration.application" ng-options="app.APP_ID as app.APP_NAME for app in applications">
</select>
</li>
<li>Namespace:
<select name="namespace" required ng-model="processState.widgetInstance.configuration.namespace" ng-options="namespace.NAMESPACE_ID as namespace.NAMESPACE for namespace in namespace">
</select>
</li>
<li>Products:
<select name="product" required ng-model="processState.widgetInstance.configuration.product" ng-options="product.PRODUCT_ID as product.PRODUCT_NAME for product in product">
</select>
</li>
</ul>
</form>
I am new to Laravel and Angularjs. I would like some help on how to go about this.
Angular controller function
var loadTables = function(){
tableService.all(1,20)
.success(function(response){
console.log(response);
$scope.tables = response.data;
$scope.towns=response.town;
$scope.countrys=response.country;
$scope.package_lists=response.package_list;
$scope.categories=response.categories;
Laravel
$id = Auth::user()->id;
$packages = User::find($id)->packages;
//$packages=$packages->paginate(Input::get('perPage'))->toArray();
$countries = Country::lists('name', 'id');
$towns = Town::lists('name', 'id');
$categories = Category::lists('name', 'id');
$package_list=$packages->lists('name','id');
$packages->load('country');
return (['data'=>$packages,'town'=>$towns, 'categories'=>$categories, 'package_list'=>$package_list]);
View
<option ng-repeat="country in countrys" value="#{{country.id}}">#{{country.name}}</option>
1.The country values are not displayed in the view. how do i go about this.
<div ng-controller="tableController">
<a class="add-link btn btn-success" ng-click="toggleForm()" ng- hide="showForm">Add Packages</a>
<table class="table table-striped breathe" ng-hide="showForm">
<thead>
<tr><th>Name</th><th>About</th><th>status</th><th>Image</th> <th>Action</th></tr>
</thead>
<tbody>
<tr ng-repeat="table in tables">
<td>#{{table.name}}</td>
<td>#{{table.short_description}}</td>
<td>#{{table.status}}</td>
<td><img width="120" heigth="72" ng- src="#{{getImageSource(table.image)}}"/></td>
<td>
<button class="btn btn-sm btn-warning" ng- click="editTable(table.id)">Edit</button>
<button class="btn btn-sm btn-danger" ng- click="deleteTable(table.id, currentPage, $index)">Delete</button>
</td></tr>
</tbody>
</table>
<ul class="pagination" ng-hide="showForm">
<li ng-class="{'disabled':currentPage==1}"><a ng- click="loadFirstPage()">«</a></li>
<li ng-repeat="page in pages" ng-class="{'active':page==currentPage}"><a ng-click="loadNthPage(page)">#{{page}}</a></li>
<li ng-class="{'disabled':currentPage==lastPage}"><a ng-click="loadLastPage()">»</a></li>
</ul>
<form name="tablesForm" ng-show="showForm" class="col-md-4" enctype="multipart/form-data">
<div class="form-group">
Name<input type="text" name="number" ng-model="newName" class="form- control" required>
<em class="muted" ng-show="tablesForm.available.$pristine && tablesForm.available.$invalid">Required</em>
</div>
<div class="form-group">
Avarage Price<input type="text" name="seats" ng-model="newPrice" class="form-control" required>
<em class="muted" ng-show="tablesForm.available.$pristine && tablesForm.available.$invalid">Required</em>
</div>
<div class="form-group">
Short Description<input type="text" name="position" ng- model="newShort_description" class="form-control">
</div>
<div class="form-group">
Description<input type="textarea" name="description" ng-model="newDescription" class="form-control">
</div>
<div class="form-group">
Category<select type="text" id="category" ng-model="newCategory" class="form-control" required>
<option ng-repeat="category in categories" value="#{{category.id}}">#{{category.id}}</option>
</select>
<em class="muted" ng-show="tablesForm.available.$pristine && tablesForm.available.$invalid">Required</em>
</div>
<div class="form-group">
Country<select type="text" name="country" ng-model="newCountry" class="form-control" required>
<option ng-repeat="country in countrys" value="#{{country.id}}">#{{country.name}}</option>
</select>
<em class="muted" ng-show="tablesForm.available.$pristine && tablesForm.available.$invalid">Required</em>
</div>
<div class="form-group">
Town<select type="text" name="town" ng-model="newTown" class="form-control" required>
<option ng-repeat="town in towns" value="#{{town.id}}">#{{town.name}}</option>
</select>
<em class="muted" ng-show="tablesForm.available.$pristine && tablesForm.available.$invalid">Required</em>
</div>
<div class="form-group">
<img width="120" height="82" ng-src="#{{newThumbnail}}" ng-show="showEdit" style="display: block;" />
Image<input type="file" name="thumbnail" ng-file-select="onFileSelect($files)">
</div>
<div class="form-group">
<button class="btn btn-primary" ng-hide="showEdit" ng-click="tablesForm.$valid &&addNewTable(newNumber,newSeats,newPosition,newDescription,newAvailable, currentPage)">Add new table</button>
<button class="btn btn-primary" ng-show="showEdit" ng-click="tablesForm.$valid && updateTable(tableId, newNumber,newSeats,newPosition,newDescription,newAvailable)">Update table</button>
<button class="btn btn-danger" ng-show="showForm" ng-click="toggleForm()">Cancel</button>
</div>
You're not returning countries on the response list
Try the below code:
return (['data'=>$packages,'town'=>$towns, 'country':$countries, 'categories'=>$categories, 'package_list'=>$package_list]);
Edit: as per your comments, it shows that you're returning your data as objects, not arrays. For Angular to iterate through that data, it should be stored in an array.
I am having a div which contains a set of dropdown to select a criteria. We can add or delete criteria using the plus and minus buttons. The values to fill in the dropdown is fetched from an API.
The code for the UI is below:
<form novalidate="" role="form" name="filterForm" class="form-inline">
<div ng-repeat="criteria in criterias">
<div class="m-b">
<div class="form-group s-b" style="width: 150px;">
<span>Country</span>
<select class="form-control" ng-options="item for item in country" name="account" ng-model="criteria.country" style="max-width:100%"></select>
</div>
<div class="form-group s-b" style="width: 150px;">
<span>State</span>
<select ng-options="item for item in state" class="form-control" name="account" ng-model="criteria.state" style="max-width:100%"></select>
</div>
<div class="form-group s-b" style="width: 150px;">
<span>City</span>
<select class="form-control" ng-options="item for item in city" name="account" ng-model="criteria.city" style="max-width:100%;"></select>
</div>
<div class="form-group s-b" style="width: 150px;">
<span>Predicate</span>
<select class="form-control" name="account" ng-model="criteria.predicate" style="max-width:100%">
<option value="matches">Matches</option>
<option value="not-matches">Not Matches</option>
</select>
</div>
<div class="form-group s-b" style="width: 100px;">
<span>Value</span>
<select class="form-control" ng-options="item for item in value" name="account" ng-model="criteria.value" style="max-width:100%;"></select>
</div>
<div class="form-group s-b" style="margin-top: 20px;">
<span>
<button class="btn btn-sm btn-primary pad-btn" type="submit" ng-click="addCriteria()">
<i class="fa fa-plus"></i>
</button>
<button class="btn btn-sm btn-danger pad-btn" type="submit" ng-click="deleteCriteria(criteria)">
<i class="fa fa-minus"></i>
</button>
</span>
</div>
</div>
</div>
<button class="btn btn-sm btn-primary pad-btn align-center" type="submit" ng-click="searchParams(filterForm)">Submit
<i class="fa fa-check"></i>
</button>
<button class="btn btn-sm btn-warning pad-btn align-center" type="submit" ng-click="resetFilter()">Reset
<i class="fa fa-reply"></i>
</button>
</form>
I need to watch for the dropdown and handle the event for the corresponding criteria and update the other corresponding dropdown elements for that criteria. Please let me know how to handle the $watch element when there are many criterias when user has added using the plus button as I am not advanced programmer on AngularJs.
Updated Question
Based on the suggestion I have used the ng-change instead of $watch and I am now able to handle the event and also get the reference to the criteria object. After handling the event, I need to update the state value for the selected country. I have updated the Plnkr link with the code below but the state drop down is not getting updated even after updated the scope using $scope.criterias[index] = user;. Please let me know if I am missing something.
Updated code to handle the change event:
$scope.handleClassification = function(index){
var user = $scope.criterias[index];
user.config=["California"];
$scope.criterias[index] = user;
console.log(user);
}
I am providing the updated plnkr link for more details - Plnkr
Try this way..I guess you want to update select in a cascade way...
Your HTML file:
<div ng-controller="StaticCtrl">
<h1>Static - Oriented</h1>
<p>This approach may be better when you have the entire dataset</p>
<div>
Country:
<select id="country" ng-model="cities" ng-options="country for (country, cities) in countries" ng-change="onChange()">
<option value=''>Select</option>
</select>
</div>
<div>
State: <select id="city" ng-disabled="!cities" ng-model="suburbs" ng-options="city for (city, suburbs) in cities"><option value=''>Select</option></select>
</div>
<div>
City: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>
</div>
</div>
and your JS:
function StaticCtrl($scope) {
$scope.countries = {
'India': {
'UP': ['Noida', 'Lucknow', 'Agra'],
'Maharashtra': ['Mumbai']
},
'USA': {
'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
'Los Angeles': ['Burbank', 'Hollywood']
},
'canada': {
'People dont live here': ['igloo', 'cave']
}
};
$scope.onChange = function() {
console.log("Asdasd");
$scope.suburb = '';
}
}
Here is the fiddle..
I have this Angular form http://plnkr.co/edit/?p=streamer&s=ph0QHW513czywawl.
I need to clone the row on clicking ADD (+) and delete selected row on clicking DELETE (-).
Looking for a solution in AngularJS only. In current solution, the scopes are not working correctly. Also did not yet figure out how to implement (-) functionality.
index.html
<div ng-controller="MyCtrl" style="padding: 10px;">
<br/>
<div style="width: 90%; display: inline-block; border: 1px silver solid;">
<div class="row">
<div class="col-xs-3">
<select class="form-control" data-ng-model="hr.langauge.level" tooltip="Level">
<option value="Native" ng-selected="true">Native</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control" data-ng-model="hr.langauge.name" tooltip="Language">
<option value="">Language</option>
<option value="EN">English</option>
<option value="IT">Italian</option>
<option value="DE">German</option>
<option value="FR">French</option>
</select>
</div>
<div class="col-xs-3">
<input type="text" data-ng-model="hr.langauge.remark" class="form-control" placeholder="Remark" tooltip="Remark">
</div>
<div class="col-xs-2">
</div>
</div>
<div select-last ng-repeat='item in items'></div>
</div>
<a class="btn" style="margin-bottom: 27px;" href="#" tooltip="Add" ng-click='addRow()'>
<i class="glyphicon glyphicon-plus"></i>
</a>
{{hr.langauge | json}}
language.html
<div class="row" style="padding-top: 5px;">
<div class="col-xs-3">
<select class="form-control" data-ng-model="hr.langauge.level" tooltip="Level">
<option value="">Level</option>
<option value="proficient">Proficient</option>
<option value="intermediate">Intermediate</option>
<option value="beginner">Beginner</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control" data-ng-model="hr.langauge.name" tooltip="Language">
<option value="">Language</option>
<option value="EN">English</option>
<option value="IT">Italian</option>
<option value="DE">German</option>
<option value="FR">French</option>
</select>
</div>
<div class="col-xs-3">
<input type="text" data-ng-model="hr.langauge.remark" class="form-control" placeholder="Remark" tooltip="Remarks">
</div>
<div class="col-xs-2">
<a class="btn" href="#" tooltip="Delete" ng-click="deleteRow({{$index}});">
<i class="glyphicon glyphicon-minus"></i>
</a>{{$index}}
</div>
</div>
script.js
var myApp = angular.module('myApp',[]);
myApp.directive('selectLast', function () {
return {
restrict: 'A',
templateUrl: 'language.html'
}
});
function MyCtrl($scope) {
$scope.items = [];
$scope.newitem = '';
$scope.addRow = function(){
$scope.items.push($scope.newitem);
console.log('+ clicked');
}
$scope.deleteRow = function(rowNo) {
/*$scope.items.splice($scope.newitem);*/
console.log('- clicked in row ' + rowNo);
}
}
Based on your comment and plunker, it looks like you have the Add figured out. The remove row is easier. All you need to do is splice out the row. The issue on your view is you have the index surrounded by {{}} which isn't necessary.
$scope.deleteRow = function(rowNo) {
/*$scope.items.splice($scope.newitem);*/
$scope.languages.splice(rowNo, 1);
console.log('- clicked in row ' + rowNo);
};
<a class="btn" href="#" tooltip="Delete" ng-click="deleteRow($index);">
<i class="glyphicon glyphicon-minus"></i>
</a>{{$index}}
Here is an updated plunker: http://plnkr.co/edit/7vW24aDyZH02LO1iO7F3?p=preview&s=ph0QHW513czywawl
functionality is to have a click edit a row entry, create a temporary copy of the row data, then update.
Below link
https://thinkster.io/egghead/angular-copy/