Добавить checkbox в форму AngularJS

Мне нужна ваша помощь. Я только начинаю работать с AngularJS, и я столкнулся с проблемой с кодом, который написан в Boostrap, см. Фрагмент.Добавить checkbox в форму AngularJS

Существует форма и ниже. Мне нужно добавить что-то несколько вариантов simillar для переключателей/флажок.

ПРИМЕР: Итак, сначала вы выбираете один или несколько элементов из существующей формы, а затем под ним вы можете выбрать один из этих 2-3 флажков. Выбрав их, все это суммируется в общей стоимости.

Просмотреть изображение >>>https://s18.postimg.org/chgy451ix/Screenshot_1.png

var myApp = angular.module("MyApp", []); 
 
myApp.controller("MyCtrl", function($scope){ 
 
$scope.menuCard = [ 
 
\t \t \t {item: "Egg and Cheese", cost:30, active:true}, 
 
\t \t \t {item: "Breakfast Sandwich", cost:400, active:false}, 
 
\t \t \t {item: "Blueberry Pancakes", cost:250, active:false}, 
 
\t \t \t {item: "Cheese Omelet ", cost:220, active:false}, 
 
\t \t \t ]; \t 
 
$scope.total = 30; 
 
    $scope.toggleActive = function(c) 
 
\t \t \t { 
 
\t \t \t \t c.active = !c.active; \t \t \t \t 
 
\t \t \t \t if(c.active) 
 
\t \t \t \t { 
 
\t \t \t \t \t $scope.total += c.cost; 
 
\t \t \t \t }else 
 
\t \t \t \t { 
 
\t \t \t \t \t $scope.total -= c.cost; 
 
\t \t \t \t } 
 
\t \t \t } 
 
});

body{font:20px/1.3 'Open Sans', sans-serif; color: #5e5b64; margin:0; padding:0;} \t 
 

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

источник

2016-12-07 Jasmin Ljima

@ gunr2171 добавить код –

, какой ответ вам помог? – Aravind

Вы можете использовать кнопки радио

<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 = [ 
 
\t \t \t {item: "Egg and Cheese", cost:30, active:true}, 
 
\t \t \t {item: "Breakfast Sandwich", cost:400, active:false}, 
 
\t \t \t {item: "Blueberry Pancakes", cost:250, active:false}, 
 
\t \t \t {item: "Cheese Omelet ", cost:220, active:false}, 
 
\t \t \t ]; \t 
 
$scope.total = 30; 
 
$scope.languages=[{"language":"German","cost":40},{"language":"French","cost":50},{"language":"Euro","cost":30}]; 
 
    $scope.toggleActive = function(c) 
 
\t \t \t { 
 
\t \t \t \t c.active = !c.active; \t \t \t \t 
 
\t \t \t \t if(c.active) 
 
\t \t \t \t { 
 
\t \t \t \t \t $scope.total += c.cost; 
 
\t \t \t \t }else 
 
\t \t \t \t { 
 
\t \t \t \t \t $scope.total -= c.cost; 
 
\t \t \t \t } 
 
\t \t \t } 
 
});

body{font:20px/1.3 'Open Sans', sans-serif; color: #5e5b64; margin:0; padding:0;} \t 
 

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

источник

2016-12-07 20:33:09

Большое спасибо, это почти то, что я искал, но есть одна небольшая проблема, я считаю, что вы знаете, как это сделать. «Общая сумма», я хочу быть одной цифрой, т. Е. Суммой всех выбранных цифр. Здесь я вижу рядом с радиокнопкой «{« language »:« German »,« cost »: 40}»; Может ли это не увидеть? Я просто хочу написать «немецкий язык», чтобы не писать в круглых скобках? –

@JasminLjima проверить мой обновленный ответ –

Спасибо большое! Это 99% того, что я хотел, еще один вопрос. Кнопка радио, независимо от того, являются ли они «встроенными», которые находятся рядом друг с другом. –

Я предлагаю вам это!

<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 */ 
}

Update 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

источник

2016-12-07 21:01:42 Aravind

Это именно то, что мне нужно!Но есть проблема, когда я проверю, например, «немецкий», она не изменит общую сумму, например: яйцо и сыр 30 долларов США + немецкий 40 долларов США = 70 долларов США –

@Jasmin проверить мой обновленный ответ – Aravind

downvoter DARE, чтобы дать комментарий – Aravind

Добавить checkbox в форму AngularJS

ответ

Смежные вопросы