如何正确使用单选按钮获取选定值

Question

我需要获取所选单选按钮的价格（值）并在 JS 上使用它然后返回它并在 HTML 上显示

Javascript：

      $scope.bases = [{
      name:'Tomato',
      price:3
    },{
      name:'Cream',
      price:4
    }];

HTML：

<label for="bases">Base :</label>
      <ul name="bases">
        <li ng-repeat="base in bases">
          <input type="radio" name="bases" ng-value="{{base.prix}}" ng-model="selectedValue">{{base.nom}} {{base.prix}} €</li>
      </ul>
...
{{price}}

函数JS：

$scope.PriceBase = function()
{
      var price = 0;
      // Dunno => get price of radio button
      // Calculate on it
      price + 1.20;
      // Return it to show it on HTML
      return price;

};

Answer 1

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {

  $scope.selected= {
    name: "Cream",
    price: 5.2
  };
  $scope.items= [{
    name: "Tomato",
    price: 3
  }, {
    name: "Cream",
    price: 4
  }];
  $scope.PriceChangeRateBase = function(priceValue) {
    $scope.selected.price= parseInt(priceValue) + 1.20;;

  };
  $scope.getItems = function() {
    return $scope.items;
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    <div>Which one?</div>
    <label class="radio" ng-repeat="item in getItems()">
      <input type="radio" ng-model="selected.name" name="itemOptions" ng-change="PriceChangeRateBase(item.price)" value="{{item.name}}">{{item.name}} - ${{item.price}}
    </label>
    <hr />
    <div>You picked: {{selected.name}} - ${{selected.price}}</div>
  </div>
</div>

Answer 2

试试这个代码而不是你的代码

<label for="bases">Base :</label>
      <ul name="bases">
        <li ng-repeat="base in bases">
          <input type="radio" name="bases" ng-change="PriceBase(base.price)" ng-value="{{base.price}}" ng-model="selectedValue">{{base.name}} {{base.price}} €</li>
      </ul>
...
{{price}}

控制器

$scope.PriceBase = function(valueOfrdb)
{
      $scope.price = valueOfrdb;
      // Dunno => get price of radio button
      // Calculate on it
     return parseInt(price) + 1.20;          
};

编辑

//或者这样试试

<label for="bases">Base :</label>
          <ul name="bases">
            <li ng-repeat="base in bases">
              <input type="radio" name="bases" ng-change="PriceBase()" ng-value="{{base.price}}" ng-model="selectedValue">{{base.name}} {{base.price}} €</li>
          </ul>
    ...
    {{price}}

//控制器

    $scope.PriceBase = function(valueOfrdb)
    {
      if($scope.selectedValue!=undefined)
      {
       return parseInt($scope.selectedValue) + 1.20;          
      }
      return 0.00
    };

Answer 3

$scope.PriceBase = function()
{
var price = 0;
var radios = document.getElementsByName('bases');

for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {

        price=radios[i].value;

        // only one radio can be logically checked, don't check the rest
        break;
    }
}
 price + 1.20;
      // Return it to show it on HTML
      return price;
});