根据Angularjs中的单选更改变量答案

【问题标题】：Change variables based on radio selection in Angulajs根据Angularjs中的单选更改变量
【发布时间】：2019-03-29 02:40:30
【问题描述】：

我正在 angularjs 中构建一个计算器作为 wordpress php 插件。通过简码将参数作为变量传递。我有一个 jquery ui-slider，其最小值、最大值和步长值由传递的参数设置：

<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>

如何根据单选选项更改滑块的最小值/最大值？我尝试使用 ng-if 但那是为了显示/隐藏 html。我还尝试在 app.controller 中添加 if 语句，但没有成功。

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

【问题讨论】：

Selected value in radio button group not retained in angularjs的可能重复
你的问题混杂了太多东西：jQuery、AngularJS、PHP、JavaScript、WordPress、ui-slider、单选按钮等。试着一次做一步。让 jQuery ui-slider 与 AngularJS ng-model 一起工作是第一步。将 Wordpress 短代码参数传递给 AngularJS 是另一种方法。使用单选按钮更改最小值最大值是另一回事。我很想以“过于宽泛”或缺乏“最小、完整、可验证的示例”来结束这个问题。
仅这个文件就有大约 700 行代码，整个插件由十几个类似这个的 php 文件组成。是的，它包含所有这些东西并且效果很好。我没有问传递参数。我没有询问 jQuery ui-slider。我想使用单选按钮为用户添加选项，并且我隔离了与我的问题有关的行。我的问题非常具体。对不起，如果这对你来说太宽泛了。

标签： javascript php angularjs jquery-ui-slider angularjs-3rd-party

【解决方案1】：

在plunker 中使用 ng-change 事件示例代码：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;
        }

      };
    });

【讨论】：

感谢您抽出宝贵时间在 Plunker 设置示例。这正是我想要的，效果很好。