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
Related
I want to tell user to select any option from select other than first (index=0). I saw few examples and tried but not working for me:
<select ng-model="patient.gender" name="gender" class="form-control" required>
<option>- Select -</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<div class="error" ng-show="Form.gender.$invalid">
Select gender
</div>
What to change here?
provide empty(default value) to option, so required field validation will fire on selection.
Html:
<select ng-model="patient.gender" name="gender" class="form-control" required>
<option value=''>- Select -</option> //Default value to empty
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
View Code Show the Drop Down In Client Side--
<select ng-model="employee.DeptId" class="form-control ng-pristine ng-invalid ng-invalid-required" required="">
<option disabled="disabled" value="">---Please Select---</option>
<option ng-repeat="Dep in ShowDep" value="{{Dep.Id}}">{{Dep.Name}}</option>
</select>
Angular Code In Edit Case----
$scope.EmployeeEdit = function (rowNumber) {
args = employeeArr[rowNumber];
$scope.employee.DeptId = args.DeptId;
}
Not clear about the structure of the data your binding.
So here I am showing your requirement with my own data. I think you could do the same in your cod also.
$scope.degrees = [
{"degree_code":"GB","degree_name":"Bachelor of Science"},
{"degree_code":"GR","degree_name":"Non Degree Undergraduate"}
];
$scope.selecteddegree = {degree_code:"GB"};
<!-- html -->
<select name="degree" class="form-control" ng-model="selecteddegree" ng-options="degree.degree_name for degree in degrees track by degree.degree_code" >
<option value=""> Select Degree </option>
</select>
Use ng-value instead of value in option tag.
<select ng-model="employee.DeptId" class="form-control ng-pristine ng-invalid ng-invalid-required" required="">
<option disabled="disabled" ng-value="">---Please Select---</option>
<option ng-repeat="Dep in ShowDep" ng-value="{{Dep.Id}}">{{Dep.Name}}</option>
</select>
I need to show the Name instead of Id,now in UI I get Id for Player::::
In EditDialog.Html
<select class="form-control" style="display: inline-block" name="ssDll" ng-model="Rocker.PlayerId" ng-options="p.Id as p.Name for s in Players" required>
<option value="">Select Players</option>
</select>
In app.js File on particular controller :
$scope.Players= [
{ Id : 1, Name : 'Player1' }
];
In main.html when I bind all things to main page :
<td>{{Rocker.PlayerId}} </td>
what should I pass here to get the Player name
You can do it with filter service and little logic.
Controller logic:
$scope.getName=function(id){
console.log(id);
if(!angular.isUndefined(id)){
var result= $filter('filter')($scope.Players, {Id:id})[0];
return result.Name;
}else{
return "";
}
HTML:
<select style="display: inline-block" name="ssDll" ng-model="Rocker.PlayerId" ng-options="s.Id as s.Name for s in Players" required>
<option value="">Select Players</option>
</select>
<td>Filtered out Name {{getName(Rocker.PlayerId)}}!</td>
Plunker
try this.
<select class="form-control" style="display: inline-block" name="ssDll" ng-model="Rocker.Name" ng-options="p.Name as p.Name for p in Players" required>
<option value="">Select Players</option>
</select>
You can do like this.
<select class="form-control" style="display: inline-block" name="ssDll" ng-model="Rocker.Name" ng-options="s.Name as s.Name for s in Players" required>
<option value="">Select Players</option>
</select>
and
<td>{{Rocker.Name}} </td>
This will give you the Name. But in case you want Id itself as the model value, then it is another case. For that you can do the following.
<select class="form-control" style="display: inline-block" name="ssDll" ng-model="Rocker" ng-options="s as s.Name for s in Players" required>
<option value="">Select Players</option>
</select>
Rocker.id will give id and Rocker.Name will give name.
Don't use as and bind the selected player directly
<select class="form-control" style="display: inline-block" name="ssDll"
ng-model="Rocker.selectedPlayer"
ng-options="p.Name for p in Players"
required>
<option value="">Select Players</option>
</select>
and show it as
<td>Selected player name {{Rocker.selectedPlayer.Name}} with id {{Rocker.selectedPlayer.Id}}</td>
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>
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>