I have an application developed using Codeigniter and AngularJs. I want to set a default item in manual select box, but angular adds an empty undefined item.
<select class="form-control" ng-model="newItem.is_active">
<option value="N" ng-selected="selected"><?php echo $this->lang->line('label_inactive'); ?></option>
<option value="Y"><?php echo $this->lang->line('label_active'); ?></option>
</select>
From documentation ng-selected
If the expression is truthy, then special attribute "selected" will be set on the element
So you can do something like
<option value="Y" ng-selected="newItem.is_active=='Y'"><?php echo $this->lang->line('label_active'); ?></option>
and in controller
$scope.newItem = {
is_active: 'Y'
}
OR
in controller you can set selected value like
$scope.selected = true; //put your selected condition
Demo
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div data-ng-app="myApp" ng-controller="myCtrl" data-ng-init="quantity=1; price=0">
<h2 >BILL</h2>
Product:   
<select ng-model="selectedName" ng-options="x.name for x in fruit" >
<options ng-repeat="item for item in fruit">
</options>
</select>
<br><br>
Quantity: <input type="number" ng-model="quantity"><br><br>
Price:      <input type="text"ng-model="selectedName.price ">
<p><b>Cost:</b> {{quantity *selectedName.price }}/-</p>
<p><b>SGST(6%):</b> {{quantity *selectedName.price *6/100}}/-</p>
<p><b>CGST(6%):</b> {{quantity *selectedName.price *6/100}}/-</p>
<p><b>Total With GST:</b> {{quantity * selectedName.price +quantity *selectedName.price*12/100}}/-</p>
<div ng-if="quantity * selectedName.price +quantity *selectedName.price*12/100>=1000">
<p><b>Discount:</b> {{((quantity * selectedName.price+quantity *selectedName.price*12/100)*5/100)}}/-</p>
<p><b>FINAL COST</b> {{quantity * selectedName.price+quantity *selectedName.price*12/100-(quantity * selectedName.price+quantity *selectedName.price*12/100)*5/100}}/-</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.fruit = [{name:"Orange",price:80},
{name:"Pinaple",price:100},
{name:"Grapes",price:120},
{name:"Guava",price:80},
{name:"Mango",price:95},
{name:"Apple",price:180},
{name:"Banana",price:60}];
});
</script>
thank you..
</body>
</html>
Related
<?php for($i = 1; $i <=5; $i++ ){?>
<tr id="row">
<td class="input-field col s2">
<label>Week Days</label>
<select id="week_days<?php echo $i;?>" data-rel="chosen" name="week_days<?php echo $i;?>[]" class="form-control" multiple="multiple">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
</select>
</td>
</tr>
<?php } ?>
<a id="more_btn" class="right" href="javascript:void(0);"><img src="../../assets/images/icons/add-icon.ico" width="23px" title="Add More"/></a>
How to get the value of option using jquery?
issue is that I am getting a null on click anchor tag. Waht is the right way to getting option value. First user select a Monday option and click on add more anchor tag then in alert show 1 value that is correct but when user change a option and click on add more anchor tag then alert show it null. why it show null instead of 1,2,3,4,5?
<script type="text/javascript">
var j=1;
$('#more_btn').click(function() {
j++;
var u = j-1;
var prev_weekdays = $('#week_days'+u).val();
alert(prev_weekdays);
});
</script>
When the more_btn link click get the selected value of weekdays and alert it see the example
Ex -
<script type="text/javascript">
$('#more_btn').click(function() {
var prev_weekdays = $('#week_days').find(":selected").text();
alert(prev_weekdays);
});
</script>
make the your select as
<select id="week_days" data-rel="chosen" class="form-control" multiple="multiple">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
</select>
Tell me if this is Working or not
Hope this will resolve your issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Values from Multiple Select Box</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
var countries = [];
$.each($(".country option:selected"), function(){
countries.push($(this).val());
});
alert("You have selected the country - " + countries.join(", "));
});
});
</script>
</head>
<body>
<p>Press control key (Ctrl) to select multiple values:</p>
<form>
<label>Country:</label>
<select class="country" multiple="multiple" size="5">
<option value="1">United States</option>
<option value="2">India</option>
<option value="3">United Kingdom</option>
<option value="4">Brazil</option>
<option value="5">Germany</option>
</select>
<button type="button">Get Values</button>
</form>
</body>
</html>
I was trying to search data from database using multiple select tags on onchange select tags, I have four select tags with multiple select option. here is form
<form method="GET" id="first_form" >
<div class="col-md-3">
<div class="form-group">
<label>Maintenance</label>
<select id="chkveg" name="maintenance[]" multiple="multiple">
<option value="21">Low</option>
<option value="23">Medium</option>
</select>
</div>
<input type="hidden" id="btnget" value="Get Selected Values" />
</div>
<div class="col-md-3">
<div class="form-group">
<label>Lighting </label>
<select id="chkveg1" name="lighting[]" multiple="multiple">
<option value="24">indoors: iow light</option>
<option value="25">indoors: medium light</option>
</select>
</div>
<input type="hidden" id="btnget1" value="Get Selected Values" />
</div>
<div class="col-md-3">
<div class="form-group">
<label>Shade </label><br/>
<select id="chkveg2" name="shade[]" multiple="multiple">
<option value="30">Low</option>
<option value="31">Medium</option>
</select>
</div>
<input type="hidden" id="btnget2" value="Get Selected Values" />
</div>
<div class="col-md-3">
<div class="form-group">
<label>Other</label><br/>
<select id="chkveg3" name="other[]" multiple="multiple">
<option value="40">Low</option>
<option value="41">Medium</option>
</select>
</div>
</div>
</form>
<div class="col-md-3" id="form-content">
</div>
and my database table structure is
search criteria is "If I select multiple options from one select tag, It should search using OR operator and If i select a option from second select tag, It should search using AND operator."
For example : In above form,If i select two option from maintenance tag, search using OR operator with one pl_maintenance_search column, If i select one option from lighting select tag, search using AND between pl_maintenance_search and pl_lighting_search. and same with other select tags.
I am submitting this form using this script
$("form select").on('change', function () {
var dataString = $("#chkveg, #chkveg1, #chkveg2, #chkveg3").serialize();
$.ajax({
url: 'ajax_file.php',
type: 'GET',
data: dataString,
dataType: 'html'
})
.done(function(data){
$('#form-content').html(data);
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
and here is my ajax_file.php code
$operator='OR';
$all_array = $_GET;
$unque_array = array();
$count=0;
foreach ($all_array as $main_key => $value )
{
if($main_key)
{
$count++;
}
if($count>1){ $operator='AND'; }
foreach ($value as $r_value)
{
$single = $r_value;
$query = "SELECT * FROM tbl_pl_details WHERE pl_maintenance_search LIKE ? $operator pl_lighting_search LIKE ? $operator pl_shade_search LIKE ? $operator pl_other_search LIKE ? ";
$params = array("%$single%", "%$single%", "%$single%", "%$single%" );
$select_maint_plants = $con->prepare($query);
$select_maint_plants->execute($params);
while($fetch_light_plants = $select_maint_plants->fetch(PDO::FETCH_ASSOC))
{
if(!in_array($fetch_light_plants['id'], $unque_array))
{
echo $fetch_light_plants['pl_name']; echo '<br/>';
}
$unque_array[]= $fetch_light_plants['id'];
}//End while loop
}//End foreach loop
}//End foreach loop
Above code is working with only single select tag, and not with others tag.
Please help me to solve this.
I populated a select box with data from the backend and it works well, but when I click on an item to get its value, it gives me undefined:
<div class="col-md-5">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData">
<option disabled selected value>-- select an option --</option>
<option ng-repeat="var in payloadSecteur" value="{{var.id}}">{{ var.secteur }}
</option>
</select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
Here's the function:
$scope.showPopup=function(){
alert('eee');
alert($scope.MyData);
};
This is a working snippet of your code without the value attribute set in the option tag and the options have been hard coded ,it is working perfectly
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData">
<option disabled selected value>-- select an option --</option>
<option>heldfd</option>
<option>asdf</option>
<option>asdf</option>
<option>asdf</option>
</select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showPopup=function(){
alert($scope.MyData);
};
});
</script>
Did you put your html code to div with ng-app and ng-controller defined and defined them in your Angular file? Remember also to write your Angular function into the controller.
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a car:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
</div>
Angular:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}
});
</script>
Remember also, that you don't have to use <option> tag - <select> with ng-options will be enough.
<div ng-controller="MyCtrl">
<div class="col-md-5">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData" ng-options="payloadSecteur for payloadSecteur in payloadSecteur"></select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.payloadSecteur = ['one', 'two', 'three', 'four'];
$scope.showPopup = function() {
console.log('eee');
console.log($scope.MyData);
};
}
JSFiddle
Try this:
Pass ng-model as a parameter in showPopup() like
ng-click="showPopup(MyData)"
In controller
$scope.showPopup=function(selectedData){
alert('eee');
alert(selectedData);
};
I have a <select> as below:
<div ng-show="myCtrl.name == 'Jack'">
<select ng-model="myCtrl.selectedValue" ng-options="value.id as value.title for value in myCtrl.valueDrpValues">
<option value=""> Select One ...</option>
</select>
</div>
And in myController.js, I have a function which should fill the myCtrl.valueDrpValues. how can I call this function from the select tag? I tested the ng-init, but it didn't work. Also, I called the function exactly from the ng-option and it didn't work, too. (as below:)
ng-options="value.id as value.title for value in definitionCtrl.fillValueDrp()"
You can use ng-init
Call your function there and your array will be populated, for example like so:
<div ng-init="fillValueDrp()">
<div ng-show="myCtrl.name == 'Jack'">
<select ng-model="myCtrl.selectedValue" ng-options="value.id as value.title for value in myCtrl.valueDrpValues">
<option value=""> Select One ...</option>
</select>
</div>
</div>
try this.
var app = angular
.module('MyApp', [
])
.controller('Main', ['$scope', function ($scope) {
var self = this;
self.items = [];
self.name = "Jack";
self.fillValueDrp = function(){
for(var i=0 ;i < 5; i++){
self.items.push({"id":i,"title":i});
}
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main-content" ng-app="MyApp" ng-controller="Main as myCtrl">
<div ng-show="myCtrl.name == 'Jack'" ng-init= "myCtrl.fillValueDrp()">
<select ng-model="myCtrl.selectedValue "ng-options="value.id as value.title for value in myCtrl.items">
<option value=""> Select One ...</option>
</select>
</div>
</div>
I am doing error validation in Angular as follows.
<select ng-model = "$parent.color" class = "form-control"
ng-options = "color as color for color in $parent.colors" required>
<option value="">Choose an option</option>
</select>
<span ng-show="serviceForm.$parent.color.$error.required"> My custom error message </span>
The error validation message never shows up. How to fix this?
Did you include the ngRequire module ?
ngRequire
<script>
angular.module('ngRequiredExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.required = true;
}]);
</script>
<div ng-controller="ExampleController">
<form name="form">
<label for="required">Toggle required: </label>
<input type="checkbox" ng-model="required" id="required" />
<br>
<label for="input">This input must be filled if `required` is true:</label>
<input type="text" ng-model="model" id="input" name="input" ng-required="required" /> <br>
<hr>
required error set? = <code>{{form.input.$error.required}}</code><br>
model = <code>{{model}}</code>
Try this if it works.
Your code can be like to this to work properly.
<form name="form1">
<select name="select" ng-model = "$parent.color" class = "form-control"
ng-options = "color as color for color in $parent.colors" required>
<option value="">Choose an option</option>
</select>
<span ng-show="form1.select.$error.required"> My custom error message </span>
</form>
You are not flowing FormController. View this link