Javascript 基于Angulajs中的无线电选择更改变量
我正在用angularjs构建一个计算器,作为wordpress php插件。通过短代码将参数作为变量传递。 我有一个jquery ui滑块,其中的最小值、最大值和步长值由传递的参数设置:Javascript 基于Angulajs中的无线电选择更改变量,javascript,php,angularjs,jquery-ui-slider,angularjs-3rd-party,Javascript,Php,Angularjs,Jquery Ui Slider,Angularjs 3rd Party,我正在用angularjs构建一个计算器,作为wordpress php插件。通过短代码将参数作为变量传递。 我有一个jquery ui滑块,其中的最小值、最大值和步长值由传递的参数设置: <div ui-slider="{range: 'min'}" min="{$this->weight_minimum}" max="{$this->weight_maximum}" step="{$this->weight_increment}" ng-model
<div ui-slider="{range: 'min'}" min="{$this->weight_minimum}"
max="{$this->weight_maximum}" step="{$this->weight_increment}"
ng-model="weight">
</div>
在中使用ng更改事件示例 代码: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>
你的问题可能重复了太多东西:jQuery、AngularJS、PHP、JavaScript、WordPress、ui滑块、单选按钮等等。试着一次只做一步。让jQueryUI滑块使用AngularJSNG模型是一步。将Wordpress短码参数传递给AngularJS是另一个问题。使用单选按钮更改最小最大值是另一个问题。我很想投票结束这个问题,因为它太宽泛或者缺少一个最小的、完整的、可验证的示例。仅此文件中就有大约700行代码,整个插件由十几个像这样的php文件组成。是的,它里面有所有这些东西,而且效果很好。我没有询问传递参数的问题。我没有询问jQueryUI滑块。我想为用户添加使用单选按钮的选项,并隔离了与我的问题有关的行。我的问题非常具体。很抱歉,这对您来说太宽泛了。感谢您抽出时间在Plunker建立一个示例。这正是我想要的,效果很好。
if ($scope.selection == 'lbs') {
weight_maximum = $this->weight_maximum;
} else if ($scope.selection == 'kg') {
weight_maximum = $this->weight_maximum / 2.2;
}
<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;
}
};
});