Selected option in select box with angularjs

Question

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>

In controller, set the value for ng-model="newItem.is_active" — Coder
– Coder, Commented Jan 12, 2014 at 7:07

Tasnim Reza · Accepted Answer · 2014-01-12 07:46:16Z

2

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

edited Jan 12, 2014 at 7:46

answered Jan 12, 2014 at 7:37

Tasnim Reza

6,0603 gold badges27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeslo Mathew Athipozhiyil · Accepted Answer · 2018-04-09 14:52:31Z

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

Don't just blurt out code. Adding some text to describe how this best answers the question that was asked will help improve the long-term value of the answer and help ensure it isn't deleted during review.

Collectives™ on Stack Overflow

Selected option in select box with angularjs

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related