angular - Update radiobutton values with textarea

Asked

Viewed 320 times

3

Through Pover I want to remain the values of the radiobutton, who should come to a preference textbox per line, so when the user wants to add options just insert a new value in the next line.

inserir a descrição da imagem aqui

<div ng-repeat="controle in dataform.controles" ng-switch on="controle.tipo">   

  <div ng-switch-when="radio" class="kahiar-block">   

    <div id="cmp_{{controle.codcontrole}}" class="campos form-group disabled col-md-6 animated bounceInRight " ng-controller="ControlEditCtrl" popover-placement="top" uib-popover-template="dynamicPopover.templateUrl" popover-title="Editar Controle">  
      <div class="conteudo-campo">    
        <label data-id="lbl{{controle.codcontrole}}" class="label-titulo"></label>
        <div class="input-group">
          <label class="checkbox-inline" id="div_{{$index}}" ng-repeat="item in controle.opcoes track by $index" name="{{item.codcontrole}}">          
            <input id="radio_{{$index}}" icheck type="radio"  ng-value="item" ng-model="$parent.dataform[controle.nome]">
            {{item}}
          </label>        
        </div>
      </div>
    </div>

  </div>

</div>



 <script type="text/ng-template" id="myPopoverTemplate.html">
  <div class="form-group">        
    <label>Opções</label>
    <textarea  ng-model="controle.opcoes" class="form-control">
      {{controle.opcoes.join("\n").trim()}}
    </textarea>
  </div>
  <button class="btn btn-primary">Save</button>
</script>
  • Was the answer helpful to you? Don’t forget to choose and mark what to use if someone has a similar question

1 answer

2


You’re doing almost everything the right way, but it’s best to consider that the options will be just a text and use the split at the time of assembling the checkbox, as below:

(function() {
  'use strict';
  
  angular
    .module('appExemplopRadio', []);

  angular
    .module('appExemplopRadio')
    .controller('RadioController', RadioController);

  RadioController.$inject = [];
  
  function RadioController() {
    var radio = this;
    
    iniciar();
    
    function iniciar() {
      radio.opcoes = [];
    }
  }
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appExemplopRadio">
  <div ng-controller="RadioController as radio">
    <textarea  ng-model="radio.opcoes" class="form-control">
    </textarea>
    <br>
    <br>
    <div class="input-group">
      <label class="checkbox-inline" id="label_radio_{{$index}}" ng-repeat="item in radio.opcoes.split('\n') track by $index">          
        <input id="radio_{{$index}}" ng-checked="radio.selecionado === item" type="radio" ng-value="item" ng-model="radio.selecionado">
        {{item.trim()}}
      </label>
    </div>
  </div>
</div>

Upshot:

inserir a descrição da imagem aqui

Browser other questions tagged

You are not signed in. Login or sign up in order to post.