Question

我对AngularJS比较新，我无法让滑块和数字元素正常工作。当我更改数字值时，它会更新滑块。但是，当我更改滑块值时，该数字将变为无效。

HTML

<div id="radius" ng-controller="RadiusController">
    <input type="range" ng-model="radius" ng-change="radiusChanged(radius)" ng-value="{{ radius }}" min="0" max="100" />
    <input type="number" ng-model="radius" ng-change="radiusChanged(radius)" ng-value="{{ radius | number }}" min="0" max="100" step="1" />
    Radius: <label>{{ radius }} km</label> 
</div>

控制器

angular.module("app").controller("RadiusController",
["$scope","RadiusService",
    function ($scope, RadiusService) {
        $scope.radius = RadiusService.getRadius();

        $scope.radiusChanged = function(radius){
            RadiusService.setRadius(+radius);
        }
    }]);

服务

angular.module("app").factory("RadiusService", function() {
    var radius = 10;

    return {
        setRadius: function(newRadius){
            console.log(typeof newRadius);
            radius = newRadius;
        },

        getRadius: function(){
            return radius;
        }
    }
});

我在设置新半径时检查了类型是否为数字。但是当我使用滑块时，数字元素变为无效。

在实际网站上，当数字被更改时，它具有以下类别：

class="ng-pristine ng-valid ng-valid-number ng-valid-max ng-valid-min">

但是当使用滑块时，它有这个类：

class="ng-pristine ng-valid-max ng-valid-min ng-invalid ng-invalid-number">

该数字的value属性将与滑块的value属性相同，但框中不显示任何内容。如果您要单击以递增/递减，它将从0值关于数值属性开始。

为什么会这样？

Answer 1

通过在控制器中设置$ scope.radius来修复它：

<强>控制器

angular.module("app").controller("RadiusController",
["$scope","RadiusService",
    function ($scope, RadiusService) {
        $scope.radius = RadiusService.getRadius();

        $scope.radiusChanged = function(radius){
            radius = +radius; //parse to integer
            $scope.radius = radius;
            RadiusService.setRadius(radius);
        }
    }]);

AngularJS滑块编号绑定不起作用

1 个答案: