根据 Angularjs 中的无线电选择更改变量
Change variables based on radio selection in Angulajs
我正在ui开发一个计算器 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>
如何根据单选按钮更改 min/max 滑块的值?我尝试使用 ng-if,但那是针对 showing/hiding 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;
}
使用 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;
}
};
});
我正在ui开发一个计算器 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>
如何根据单选按钮更改 min/max 滑块的值?我尝试使用 ng-if,但那是针对 showing/hiding 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;
}
使用 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;
}
};
});