ng-value with 2 values and 2 ng-model in the same input-radio

Question

ng-value with 2 values and 2 ng-model in the same input-radio

Navigation

#1 by (0 votes)

1

No ion-radio has ng-value with 2 values. The ng-model is taking the value of ng-value . The problem here is that I want to display these 2 values of ng-value separated.

ex: {{data.nomeOpc}} displays option name, and {{data.valorOpc}} displays option value. In this model it displays the 2 together and I want to separate the values. Thanks for the help

     <ion-list>
        <h3>Opções</h3>
        <ion-radio ng-repeat = "child in produto.opcoes" value = "{{child}}" ng-change = "pegar(data)" ng-model = "data.opcoes">
           <strong>{{child.nomeOpc}}
              <span> = {{child.valorOpc | currency: 'R$'}}</span>
           </strong>
        </ion-radio>
     </ion-list>

Below is the function in the controller

$scope.pegar = function(data) {
 $scope.data = JSON.parse(data.opcoes);
  console.log($scope.data)
  console.log($scope.data.id, $scope.data.nomeOpc);
}

angularjs ionic

asked by anonymous 25.02.2016 / 12:50

1 answer

Help with Mask Policy for numbers with 4 decimal places in AngularJS Low performance when converting Blob to Bitmap

score 0 · Accepted Answer

Why do not you pass the entire object in value and then manipulate it in the controller? It would be something like this in AngularJs:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
    $scope.dados = [{
        id: 1,
        nome: 'Diego'
    }, {
        id: 2,
        nome: 'Fernando'
    }, {
        id: 3,
        nome: 'Bruno'
    }];
  
    $scope.pegar = function(data) {
        console.log(data)
        console.log(data.id, data.nome);
   
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="myApp" ng-controller="MyCtrl">
<ul>
     <li ng-repeat="item in dados">
            <label>{{item.nome}}
                <input type="radio" ng-model="data.nome" name="name" 
                value="{{item}}" ng-change="pegar(item)" />
            </label>
        </li>
    </ul>
</div>

NOTE: To view the result enter browser developer mode and go to the console.

Update:

In its ng-change instead of passing the content of ng-model pass the contents of value :

<ion-radio ng-repeat = "child in dados" value = "{{child}}"  ng-model = "data.nome" ng-change = "pegar(child)"  ng-checked="true">

And then in your function pegar :

$scope.pegar = function(data) {
     //$scope.data = data;
     console.log(data)
     console.log(data.id, data.nome);
}

Example with Ionic: link