Selected option in select box with angularjs - javascript

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:&nbsp&nbsp&nbsp
<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:&nbsp&nbsp&nbsp&nbsp&nbsp <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

Get option value in multiple select tag using jquery

<?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>

Search data using select tags with multiple option in php using ajax

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.

How to get value from dropdown list with angularjs

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);
};

Call a function in a select element for filling ngOptions source?

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>

Error validation not working in AngularJS

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

Categories