Saya membutuhkan bantuan Anda. Saya baru mulai bekerja dengan AngularJS dan saya mengalami masalah dengan kode yang ditulis dalam Boostrap lihat cuplikan.

Ada formulir dan di bawahnya saya perlu menambahkan sesuatu beberapa opsi yang mirip dengan tombol radio/kotak centang.

CONTOH: Jadi pertama-tama Anda memilih satu atau lebih item dari formulir yang ada, lalu di bawahnya Anda dapat memilih salah satu dari 2-3 kotak centang itu. Setelah memilih itu, semuanya diringkas dalam Total Biaya.

Lihat gambar >>> https://s18.postimg.org/chgy451ix/Screenshot_1.png

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;
				}
			}
});
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/>
         
         <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>
3
Jasmin Ljima 7 Desember 2016, 22:44

2 jawaban

Jawaban Terbaik

Anda dapat menggunakan tombol radio

<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
Naghaveer R 9 Desember 2016, 05:30

Saya akan menyarankan Anda dengan ini!

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

Totalnya akan terlihat seperti

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

Dan pengontrolnya akan terlihat seperti

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

Tambahkan ini ke css Anda

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

Pembaruan 1: menambahkan nama item dan biaya + bahasa dan biaya seperti yang diharapkan di komentar.

Modifikasi ada di sini

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

Dan hal yang sama diperbarui di plunker.

Berikut adalah DEMO di plunker

0
Aravind 8 Desember 2016, 04:08