在带有angularjs的选择框中选择选项

时间:2014-01-12 07:04:37

标签: javascript codeigniter angularjs angularjs-directive angularjs-scope

我使用CodeigniterAngularJs开发了一个应用程序。我想在手动选择框中设置默认项目,但angular会添加一个空的未定义项目。

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

2 个答案:

答案 0 :(得分:2)

来自文档ng-selected

  

如果表达式是真实的,那么将在元素

上设置特殊属性“selected”

所以你可以做点什么

<option value="Y"  ng-selected="newItem.is_active=='Y'"><?php echo $this->lang->line('label_active'); ?></option>

并在控制器中

$scope.newItem = {
  is_active: 'Y'
}

在控制器中,您可以将selected值设置为

$scope.selected = true; //put your selected condition

Demo

答案 1 :(得分:0)

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