Добавить радиоразряд динамически угловойа

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    <script src="https://code.angularjs.org/1.4.1/angular.js"></script> 
    <script> 
    var app = angular.module('sampleapp', []); 
    app.controller('samplecontroller', ["$scope", function($scope) { 
     $scope.itemsToPush=[{amount:'',percentage:''}]; 
     $scope.myFunction = function() { 
     $scope.itemsToPush.push({ 
       amount:'', 
       percentage:'' 
      }) 

     }; 
    }]); 
    </script> 
</head> 

<body ng-app="sampleapp" ng-controller="samplecontroller"> 


    <div class="test" ng-repeat="items in itemsToPush"> 
    <div class="form-group" style="margin-top: 20px;"> 
     <label class="checkbox-inline"> 
     <input type="radio" name="amount" value="amount" ng-model="items.amount"> Reduction Amount 
     </label> 
     <label class="checkbox-inline" style="padding-left: 0px;"> 
     <input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;"> 
     </label> 
     <label class="checkbox-inline" style="padding-left: 0px;"> 
     <input type="radio" name="percentage" value="percentage" ng-model="items.amount"> Reduction Percentage 
     </label> 
     <label class="checkbox-inline" style="padding-left: 0px;"> 
     <input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;"> 
     </label> 
    </div> 

    </div> 
    <div> 
    <button class="btn btn-secondary" type="button" ng-click="myFunction()">Go!</button> 
    </div> 

</body> 

</html>

Hi. Я работаю в angularjs. У меня есть div, который содержит два переключателя (можно выбрать только один). У меня есть кнопка под названием Go.On click Go Мне нужно динамически добавлять Radio div. Проблема, с которой я столкнулся, - это когда добавляется div, я могу выбрать только одно радио из обоих (оригинальное и реплицированное) divs.I необходимо выбрать один переключатель из каждого div. Заранее спасибо. Вот https://plnkr.co/edit/cLemG02uFyQupG7h74WM?p=preview Добавить радиоразряд динамически угловойа

источник

2017-02-08 Anusha Bayya

вам необходимо указать уникальное имя для каждого входного переключателя, например: то же, что и для процента. – Jenny

@Jenny Большое спасибо. Это помогло. –

Надеюсь, я правильно понимаю это. Поправьте меня, если я ошибаюсь.

Вы хотите, чтобы каждая строка имела два варианта. 1. Сумма 2. Процент Из них только один может быть выбран.

Для этого необходимо иметь одинаковое имя для обоих переключателей.

<div class="form-group" style="margin-top: 20px;"> 
    <label class="checkbox-inline"> 
    <input type="radio" name="reductionType" value="amount" ng-model="items.amount"> Reduction Amount 
    </label> 
    <label class="checkbox-inline" style="padding-left: 0px;"> 
    <input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;"> 
    </label> 
    <label class="checkbox-inline" style="padding-left: 0px;"> 
    <input type="radio" name="reductionType" value="percentage" ng-model="items.amount"> Reduction Percentage 
    </label> 
    <label class="checkbox-inline" style="padding-left: 0px;"> 
    <input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;"> 
    </label> 
</div>

Теперь на основе выбранного элемента вы будете иметь либо количество или процент в items.amount переплета.

Если вы хотите несколько строк этого, вы должны использовать разные имена для каждой строки. Для этого будет полезной переменная индекса $.

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="style.css"> 
     <script src="script.js"></script> 
     <script src="https://code.angularjs.org/1.4.1/angular.js"></script> 
     <script> 
     var app = angular.module('sampleapp', []); 
     app.controller('samplecontroller', ["$scope", function($scope) { 
      $scope.itemsToPush=[{amount:'',percentage:''}]; 
      $scope.myFunction = function() { 
      $scope.itemsToPush.push({ 
        amount:'', 
        percentage:'' 
       }) 
      }; 
     }]); 
     </script> 
    </head> 
    <body ng-app="sampleapp" ng-controller="samplecontroller"> 
     <div class="test" ng-repeat="items in itemsToPush"> 
     <div class="form-group" style="margin-top: 20px;"> 
      <label class="checkbox-inline"> 
      <input type="radio" name="reductionType_{{$index}}" value="amount{{" ng-model="items.amount"> Reduction Amount 
      </label> 
      <label class="checkbox-inline" style="padding-left: 0px;"> 
      <input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;"> 
      </label> 
      <label class="checkbox-inline" style="padding-left: 0px;"> 
      <input type="radio" name="reductionType_{{$index}}" value="percentage" ng-model="items.amount"> Reduction Percentage 
      </label> 
      <label class="checkbox-inline" style="padding-left: 0px;"> 
      <input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;"> 
      </label> 
     </div> 
     </div> 
     <div> 
     <button class="btn btn-secondary" type="button" ng-click="myFunction()">Go!</button> 
     </div> 
    </body> 
</html>

reductionType _ {{$}} индекс создает новую кнопку радио группу для каждой итерации, следовательно, делает только один кликабельным. (Генерирует reductionType_0, reductionType_1 и так далее)

источник

2017-02-08 07:00:58 Deltatiger

Спасибо :) Это сработало –

<div class="test" ng-repeat="items in itemsToPush"> 
<div class="form-group" style="margin-top: 20px;"> 
    <label class="checkbox-inline"> 
    <input type="radio" name="reduction{{[$index]}}" value="amount" ng-model="items.amount"> Reduction Amount 
    </label> 
    <label class="checkbox-inline" style="padding-left: 0px;"> 
    <input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;"> 
    </label> 
    <label class="checkbox-inline" style="padding-left: 0px;"> 
    <input type="radio" name="reduction{{[$index]}}" value="percentage" ng-model="items.amount"> Reduction Percentage 
    </label> 
    <label class="checkbox-inline" style="padding-left: 0px;"> 
    <input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;"> 
    </label> 
</div>

вам нужно сделать одинаковые имена флажком одного и добавить {{[%index]}}, поэтому на каждом приращении каждого DIV имеет свои собственные имена флажков

источник

2017-02-08 07:36:53

собственные имена означают уникальные имена –

Добавить радиоразряд динамически угловойа

ответ

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