在表单AngularJS中添加复选框

时间：2016-12-07 19:44:43

标签： angularjs forms input

我需要你的帮助。我刚刚开始使用AngularJS，我遇到了用Boostrap编写的代码问题，请参阅片段。

有一个表格，在它下面我需要添加一些选项simillar到单选按钮/复选框。

示例：首先，您从现有表单中选择一个或多个项目，然后在其下方，您可以选择其中一个2-3复选框。选择后，总计成本总和。

查看图片＆gt;＆gt;＆gt; https://s18.postimg.org/chgy451ix/Screenshot_1.png

＆＃13;
＆＃13; 
var myApp = angular.module("MyApp", []);
myApp.controller("MyCtrl", function($scope){
 $scope.menuCard = [
			{item: "Egg and Cheese", cost:30, active:true},
			{item: "Breakfast Sandwich", cost:400, active:false},
			{item: "Blueberry Pancakes", cost:250, active:false},
			{item: "Cheese Omelet ", cost:220, active:false},
			];	
 $scope.total = 30;
  $scope.toggleActive = function(c)
			{
				c.active = !c.active;				 
				if(c.active)
				{
					$scope.total += c.cost;
				}else
				{
					$scope.total -= c.cost;
				}
			}
});
＆＃13; 
body{font:20px/1.3 'Open Sans', sans-serif; color: #5e5b64; margin:0; padding:0;}	

.container{
  margin-top:50px;
  
}

span{float:right;}
＆＃13; 
<html data-ng-app = "MyApp">
<head>
  <title>AngularJS - DataBinding</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  
 </head>
 <body data-ng-controller = "MyCtrl">
  
   <div class = "container">
     <div class = "row">
       
       <div class = "col-md-4 col-md-offset-3">
           <h2 class = "text-center"><strong>Order Form</strong></h2>
           <div class="list-group">
            <button type="button" class="list-group-item" data-ng-repeat = "item in menuCard"  data-ng-click = "toggleActive(item)"   ng-class="{active:item.active}">{{item.item}}<span>{{ item.cost | currency }}</span></button>
          </div>
         <hr/>
         
         <div class="alert alert-success" role="alert">Total Cost: <span>{{ total | currency }}</div>
           
       </div>
       
      
        
     </div>
   </div>
   
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   
   <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
 </body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您可以使用单选按钮

<div ng-repeat="lang in languages">
    <input type="radio" name="selectedLang" ng-model="$parent.selectedLang" ng-value="lang" />{{lang}}
  </div>


var myApp = angular.module("MyApp", []);
myApp.controller("MyCtrl", function($scope){
 $scope.menuCard = [
			{item: "Egg and Cheese", cost:30, active:true},
			{item: "Breakfast Sandwich", cost:400, active:false},
			{item: "Blueberry Pancakes", cost:250, active:false},
			{item: "Cheese Omelet ", cost:220, active:false},
			];	
 $scope.total = 30;
$scope.languages=[{"language":"German","cost":40},{"language":"French","cost":50},{"language":"Euro","cost":30}];
  $scope.toggleActive = function(c)
			{
				c.active = !c.active;				 
				if(c.active)
				{
					$scope.total += c.cost;
				}else
				{
					$scope.total -= c.cost;
				}
			}
});
body{font:20px/1.3 'Open Sans', sans-serif; color: #5e5b64; margin:0; padding:0;}	

.container{
  margin-top:50px;
  
}

span{float:right;}
<html data-ng-app = "MyApp">
<head>
  <title>AngularJS - DataBinding</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  
 </head>
 <body data-ng-controller = "MyCtrl">
  
   <div class = "container">
     <div class = "row">
       
       <div class = "col-md-4 col-md-offset-3">
           <h2 class = "text-center"><strong>Order Form</strong></h2>
           <div class="list-group">
            <button type="button" class="list-group-item" data-ng-repeat = "item in menuCard"  data-ng-click = "toggleActive(item)"   ng-class="{active:item.active}">{{item.item}}<span>{{ item.cost | currency }}</span></button>
          </div>
         <hr/>
         <label style="display: inline-block;" ng-repeat="lang in languages">
<input type="radio" name="selectedLang" ng-model="$parent.selectedLang" ng-value="lang" />{{lang.language}}
  </label>
         
         <div class="alert alert-success" role="alert">Total Cost: <span>{{ total + selectedLang.cost | currency }}</div>
           
       </div>
       
      
        
     </div>
   </div>
   
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   
   <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
 </body>

</html>

答案 1 :(得分：0)

我建议你这个！

<div class="row">
    <div ng-repeat="lang in languages">
        <div class="col-sm-3">
            <input type="radio" name="selected" ng-model="$parent.selectedLang" ng-value="lang" />
            <div class="row">
                <div class="col-sm-1">
                    {{lang.language}}
                </div>
            </div>
            <div class="row">
                <div class="col-sm-1">
                    {{lang.cost}}
                </div>
            </div>
        </div>
    </div>
</div>

总数看起来像

<div class="alert alert-success" role="alert">Total Cost:
    <span>{{ total + selected.cost | currency }}</span>
</div>

，控制器看起来像

$scope.languages = [{
    "language": "German",
    "cost": 40
  }, {
    "language": "French",
    "cost": 50
  }, {
    "language": "Euro",
    "cost": 30
  }];

将这些添加到您的CSS 

input[type="radio"] {
    -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
    -moz-appearance: checkbox;    /* Firefox */
    -ms-appearance: checkbox;     /* not currently supported */
}

更新1： 在评论中添加了项目名称和费用+语言和费用。

修改就在这里

 <div class="alert alert-success" role="alert">Total Cost:

        {{selectedproduct.item}} &nbsp; $ {{selectedproduct.cost}}
        + {{selected.language}} &nbsp; $ {{selected.cost}}
          <span>{{ total + selected.cost | currency }}
         </span>
        </div>

并在plunker中更新。

以下是plunker中的实时DEMO

相关问题
最新问题