Изменить переменные на основе выбора радио в Angulajs - PullRequest
Новая
       36

Изменить переменные на основе выбора радио в Angulajs

0 голосов
/ 28 марта 2019

Я строю калькулятор в angularjs как плагин для WordPress PHP. Передача параметров в виде переменных через шорткод. У меня есть jQuery UI-слайдер с минимальными, максимальными и пошаговыми значениями, установленными переданными параметрами: 

<div ui-slider="{range: 'min'}" min="{$this->weight_minimum}"
     max="{$this->weight_maximum}" step="{$this->weight_increment}"
     ng-model="weight">
</div>

Я также добавил две переключатели после ползунка: 

<div class="user-selection">
    <label class="radio-container">{{ "Pounds" | translate }}
      <input type="radio" checked="checked" name="radio"
             ng-model="selection" value="lbs">
      <span class="checkmark"></span>
    </label>
    <label class="radio-container">{{ "Kilograms" | translate }}
      <input type="radio" name="radio" ng-model="selection" value="kg">
      <span class="checkmark"></span>
</label>
</div>

Как изменить минимальные / максимальные значения ползунка в зависимости от выбора радиостанции? Я пытался использовать нг-если, но это для показа / скрытия HTML. Я также попытался добавить оператор if в app.controller, но безуспешно. 

if ($scope.selection == 'lbs') {
  weight_maximum = $this->weight_maximum;
} else if ($scope.selection == 'kg') {
  weight_maximum = $this->weight_maximum / 2.2;
}

1 Ответ

1 голос
/ 28 марта 2019

Использование примера события ng-change в plunker Код: html 

  <div class="user-selection">
    <label class="radio-container"> Pounds
      <input type="radio" checked="checked" name="radio" ng-change="changUnit()" ng-model="selection" value="lbs">
      <span class="checkmark"></span>
    </label>
    <label class="radio-container"> Kilograms
      <input type="radio" name="radio" ng-model="selection" value="kg" ng-change="changUnit()">
      <span class="checkmark"></span>
    </label>
  </div>

  <div>Min : {{weight_minimum}}</div>
  <div>Max : {{weight_maximum}}</div>
  <div>slider value : {{weight}}</div>
  <br/>
  <br/>


  <div ui-slider min="{{weight_minimum}}" max="{{weight_maximum}}" step="{{weight_increment}}" ng-model="weight">
  </div>

ваш контроллер: 


    var app = angular.module('plunker', ['ui.slider']);

    app.controller('MainCtrl', function($scope) {

      $scope.selection = 'kg'
      $scope.weight_minimum = 10;
      $scope.weight_maximum = 1000;
      $scope.weight_increment = 1;
      $scope.weight = 50;

      $scope.changUnit = function() {
        if ($scope.selection == 'lbs') {
         $scope.weight_maximum = $scope.weight_maximum * 2.2;
        } else if ($scope.selection == 'kg') {
          $scope.weight_maximum =  $scope.weight_maximum / 2.2;
        }

      };
    });
...