Angularjs and select default value - angularjs

I have this HTML code (no, I can not to convert it in a ng-options):
<form>
<div class="list">
<div style="margin-bottom: 20px;">
<label class="item item-input item-select">
<div class="input-label">
Price From (start)
</div>
<select required id="priceForm" ng-model="search.priceFrom" ng-init="'search.priceFrom = searchParams.priceFrom'">
<option value=0>All</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000+</option>
</select>
</label>
</div>
<div>
<label class="item item-input item-select">
<div class="input-label">
Vacation Days (start)
</div>
<select required ng-model="search.vacationDays">
<option value=0 >All</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10+</option>
</select>
</label>
</div>
</div>
</form>
I want this:
The first time that I see this page the values of both select must be "All" (value = 0), and I think that I need only to add "required" but it does no work.
And for every next times the default value need to be the value inside searchParams.priceFrom (it is a variable in my $scope).
Where is my error ?
Thanks.
M.

Since both selects are bound to your search.vacationDays && search.priceFrom all you would need to do in your controller is something like:
$scope.search.priceFrom = 0;
$scope.search.vacationDatys = 0;

Please see demo below
just set your serach obj in controller
$scope.search = {
priceFrom: 0,
vacationDays: 0
}
var app = angular.module('app', []);
app.controller('fCtrl', function($scope) {
$scope.search = {
priceFrom: 0,
vacationDays: 0
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="fCtrl">
<form>
<div class="list">
<div style="margin-bottom: 20px;">
<label class="item item-input item-select">
<div class="input-label">
Price From (start)
</div>
<select required id="priceForm" ng-model="search.priceFrom" ng-init="'search.priceFrom = searchParams.priceFrom'">
<option value=0>All</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="700">700</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000+</option>
</select>
</label>
</div>
<div>
<label class="item item-input item-select">
<div class="input-label">
Vacation Days (start)
</div>
<select required ng-model="search.vacationDays">
<option value=0>All</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10+</option>
</select>
</label>
</div>
</div>
</form>
</div>
</div>

Related

how to fix mistake in custom function REST API in AngularJS: Expected response to contain an object but got an array

I have a RESTful API . It gives me access to a MYSQL database, where I'm trying to get some data using custom function getScholarshipfindByField and using those JSON data i want to build a page using AngularJS.
But I got Error: [$resource:badcfg] Error in resource configuration for action getScholarshipfindByField. Expected response to contain an object but got an array (Request: GET `http://localhost:8080/scholarship/webresources/scholarship.scholarship)
// Service
var Services = angular.module('raServices', ['ngResource']);
Services.factory("Scholarship",function($resource){
return $resource('http://localhost:8080/scholarship/webresources/scholarship.scholarshi p/level=:level/field=:field/country=:country/language=:language', {level:'#level',field:'#field',country:'#country',language:'#language'}, {},{
findAll:{method:'GET', isArray:true},
countREST:{method:'GET', isArray:true},
create:{method:'POST'},
edit:{method:'PUT'},
query: {method:'GET',params: {level:'#level',field:'#field',country:'#country',language:'#language'},isArray: true},
remove:{method:'DELETE'},
find:{method:'GET',params: {id: 'id'},isArray: false},
findRange:{method:'GET'},
getScholarshipfindByField:{method:'GET',params:{level:'#level',field:'#field',country:'#country',language:'#language'},isArray:false,responseType:'json'}
}
)
});
// Controller
.controller('View2Ctrl',['$scope', 'Scholarship', function($scope, Scholarship) {
$scope.data = {};
$scope.submitForm = function(){
Scholarship.getScholarshipfindByField( {'level':$scope.data.level,'field':$scope.data.field,'country':$scope.data.country,'language':$scope.data.language}, function( response ){
$scope.allscholarship = response;
});
}
}]);
//ScholarshipFacadeRest
#GET
#Path("{level}/{field}/{country}/{language}")
#Produces({ "application/json"})
public List<Scholarship> getScholarshipfindByField(#PathParam("level") String level,#PathParam("field") String field,#PathParam("country") String country,#PathParam("language") String language){
return super.getScholarshipfindByField(level,field,country,language);
}
// AbstractFacade.java
public List<T> getScholarshipfindByField(Object level,Object field,Object country,Object language) {
CriteriaBuilder cb = getEntityManager().getCriteriaBuilder();
CriteriaQuery cq = cb.createQuery();
Root<T> c = cq.from(entityClass);
cq.select(c);
cq.where(cb.equal(c.get("level"), level),cb.equal(c.get("field"), field),cb.equal(c.get("country"), country),cb.equal(c.get("language"), language));
return getEntityManager().createQuery(cq).getResultList();
}
//html
<h3>Choose yours sholarship</h3>
</br></br>
<div ng-app="myApp" ng-controller="View2Ctrl as data" >
<div>
<form name="myForm" ng-submit="submitForm()">
<div ng-hide="shows" >
<div class="form-group">
<label for="level"> Select level of study: </label><br>
<select name="level" ng-model="data.level">
<option value="All">All</option>
<option value="Bachelor">Bachelor</option>
<option value="Masters">Master</option>
<option value="PhD Degree">PhD Degree</option>
<option value="Intership">Intership</option>
<option value="Non Degree">Non Degree</option>
</select></br></br></br>
<tt>{{data.level}}</tt><br/>
</div>
<div class="form-group">
<label for="field"> Select field of study: </label><br>
<select name="field" ng-model="data.field">
<option value="All">All</option>
<option value="Information Technology">Information Technology</option>
<option value="Economics and Finance">Economics and Finance</option>
<option value="Business and Management">Business and Management</option>
<option value="Engineering">Engineering</option>
<option value="Computer Science">Computer Science</option>
<option value="Social Sciences">Social Sciences</option>
<option value="Physical and Life Sciences">Physical and Life Sciences</option>
<option value="Arts">Arts</option>
<option value="Humanities">Humanities</option>
<option value="Agriculture">Agriculture</option>
</select></br></br></br>
<tt>{{data.field}}</tt><br/>
</div>
<div class="form-group">
<label for="country"> Select country of study: </label><br>
<select name="country" ng-model="data.country">
<option value="All">All</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Netherlands">Netherlands</option>
<option value="Australia">Australia</option>
<option value="Belgium">Belgium</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Canada">Canada</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Greece">Greece</option>
<option value="France">France</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Luxembourg">Luxembourg</option>
<option value="New Zealand">New Zealand</option>
<option value="Norway">Norway</option>
<option value="Poland">Poland</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Spain">Spain</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Other">Other</option>
</select></br></br></br>
<tt>{{data.country}}</tt><br/>
</div>
<div class="form-group">
<label for="language"> Select language of study: </label><br>
<select name="language" ng-model="data.language">
<option value="All">All</option>
<option value="English">English</option>
<option value="German">German</option>
<option value="French">French</option>
</select></br></br></br>
<tt>{{data.language}}</tt><br/>
</div>
<button ng-click=" shows = true" type="submit" >Go!</button>
</div>
</form>
</div>
<div ng-show="shows" >
<div align="center" div ng-app="myApp" ng-controller="View2Ctrl">
<div class="container">
<div >
<table class="table-condensed">
<thead>
<tr>
<th>id</th>
<th>level</th>
<th>field</th>
<th>country</th>
<th>language</th>
<th>university</th>
<th>link</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="onescholarship in allscholarship">
<td>{{ onescholarship.id}}</td>
<td>{{ onescholarship.level}}</td>
<td>{{ onescholarship.field}}</td>
<td>{{ onescholarship.country}}</td>
<td>{{ onescholarship.language}}</td>
<td>{{ onescholarship.university}}</td>
<td>{{ onescholarship.link}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<button ng-click="shows = false">New search</button>
</div>
</div>
How fix Error?
You have set isArray to false for that call in this line
getScholarshipfindByField:{method:'GET',params:{level:'#level',field:'#field',country:'#country',language:'#language'},isArray:false,responseType:'json'}
Just change that to true and it should come through.

How to duplicate array using clone

Can you help me to solve the error, my array post is not working, it always get the 1st value only. it duplicate only the text fields.
My content where to duplicate the fields using drop down button.
<h3>Step 3</h3>
<label><strong>Shipment Details</strong></label><br>
<label>Quantity:</label>
<select class="form-control" id="num_item" name="items_ID[]">
<option value="0">- SELECT -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select><br>
<div class="itemList">
<label>Package <span class="number">1</span> type *: </label>
<select class="form-control" name="packaging[]">
<option value="Letter Size"> Letter Size </option>
<option value="Small Box"> Small Box </option>
<option value="Meduim Box"> Meduim Box </option>
<option value="Large Box"> Large Box </option>
<option value="Tube"> Tube </option>
<option value="Pallet"> Pallet </option>
</select>
<br/>
<label>Package Dimensions & Weight: </label><br>
<input type="text" class="package-dimension form-control" name="pcklength[]" placeholder="Length *" style="width: 15%;" value=""/>
<input type="text" class="package-dimension form-control" name="pckwidth[]" placeholder="Width *" style="width: 15%;" value=""/>
<input type="text" class="package-dimension form-control" name="pckheight[]" placeholder="Height *" style="width: 15%;" value=""/> <strong>inch</strong>
<input type="text" class="package-dimension form-control" name="pckWeight[]" placeholder="Weight *" style="width: 35%;" value=""/> <strong>kg</strong> -->
<br><hr>
</div>
<div class="anotherItemList">
</div>
My Script
//for required Item
//when the webpage has loaded do this
$(document).ready(function() {
//if the value within the dropdown box has changed then run this code
$('#num_item').change(function(){
//get the number of fields required from the dropdown box
var num = $('#num_item').val();
var i = 0;
$(".newItemList").remove();
if (num > 1){
var i = 1;
while (i < num){
$('.itemList').clone().appendTo('.anotherItemList').removeClass("itemList").addClass("newItemList newItemList-" + i);
$(".newItemList-" + i + " .number").text(i+1);
i++;
}
}
});
});
//end

angularjs - select dropdown has an extra option

How can I remove the first empty < option > in the select drop down? I just want the first < option > to be the "-Select-".
html
<div ng-controller="ExampleController">
Distance in KM
<span class="nullable">
<select ng-model="myColor" >
<option value="null">- Select -</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span><br/>
</div>
script
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myColor = '';
}]);
Use ng-init to initialize default blank value and also set blank value in option element:
<div ng-controller="ExampleController" ng-init="myColor = ''">
Distance in KM
<select ng-model="myColor">
<option value="">- Select -</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
Or since you are already initializing it in controller, just delete null from option.

AngularJS - link two select

I want to link two select in angularjs. when first select value in(3,4) the second select show.
code:
<select ng-model="type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select ng-show="type in [3,4]">
...
</select>
But it is not work.
Thanks.
Here is fiddle :-)
http://jsfiddle.net/svbxwphr/
<div ng-controller="AjaxCtrl">
<h1>AJAX - Oriented</h1>
<div>
Country:
<select id="country" ng-model="country" ng-options="country for country in ['1','2','3','4']">
<option value=''>Select</option>
</select>
</div>
<div>
City: <select id="city" ng-disabled="!cities" ng-model="city" ng-options="city for city in cities"><option value=''>Select</option></select>
</div>
Controller:-
function AjaxCtrl($scope) {
$scope.$watch('country', function(newVal) {
if (newVal==3|| newVal==4){
$scope.cities = ['3', '4'];}
else{
$scope.cities = [];
}
});
}
there is no syntax for in in ng-show.
you have to write long syntax.
<select ng-model="type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select ng-show="type === '3' || type === '4'">
...
</select>

trigger when dropdown option is selected angularjs

I have a dropdown list of countries. and when iam selecting a particular country my output should be filtered with details of only that country to be displayed following is my code but not working properly.
<label for="filtercountry" class="control-label col-xs-2">Filter By Country</label>
<div class="col-xs-2">
<select class="form-control">
<option value="None">-- Select --</option>
<option ng-model="Tofilter.country" value="India" ng-change="changed()">India</option>
<option ng-model="Tofilter.country" value="USA" ng-change="changed()">USA</option>
<option ng-model="Tofilter.country" value="Pakistan" ng-change="changed()">Pakistan</option>
<option ng-model="Tofilter.country" value="China" ng-change="changed()">China</option>
<option ng-model="Tofilter.country" value="Australia" ng-change="changed()">Australia</option>
</select>
</div>`<ul id="result">
Name :{{x }}
`
Put ng-change on the select element:
<select class="form-control" ng-change="changed()">
it's not necessary to put your model in all option, put it in select
<select class="form-control" ng-change="changed()" ng-model="Tofilter.country">
<div class="col-xs-2">
<select class="form-control" ng-change="changed()" ng-model="Tofilter.country" >
<option value="None">-- Select --</option>
<option value="India" >India</option>
<option value="USA" >USA</option>
<option value="Pakistan" >Pakistan</option>
<option value="China" >China</option>
<option value="Australia" >Australia</option>
</select>
</div>

Resources