2013-02-28 160 views
1

後,我有這樣一對夫婦的投入:AngularJS表達式轉換數字爲字符串變化

<input type='range' min='15' max='{{plan.retirementAge - 1}}' name='age' ng-model='plan.age' /> 
<input type='range' min='{{plan.age + 1}}' max='90' name='retirementAge' ng model='plan.retirementAge' /> 

這正常工作時,第一次加載頁面,但如果我改變任一值的其他人會當作綁定一個字符串,並將其更改爲「37」+ 1 =「371」而不是38.任何人都知道爲什麼會發生這種情況?

回答

1

這可能是因爲Angular還沒有實現type="range"的處理程序,就像它與type="number"等一樣。您應該在他們的Github網站上(在「問題」下)報告此問題。

在此同時,您可以避開它這樣。也就是說,創建自己的range-model和解析器添加到ngModelController該值轉換爲一個數字。

<!doctype html> 
<html ng-app="myApp"> 
<head> 
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script> 
    <script> 
    angular.module('myApp', []).controller('Ctrl', function($scope) { 
     $scope.age = 10; 
     $scope.retirementAge = 65; 
    }) 
    .directive('rangeModel', function() { 
     return { 
      require: 'ngModel', 
      link: function($scope, elem, attrs, ctrl) { 
       ctrl.$parsers.push(function(val) { 
        return parseInt(val, 10); 
       }); 
      } 
     }; 
    }); 
    </script> 
</head> 
<body ng-controller="Ctrl"> 
    <input type='range' min='15' max='{{retirementAge - 1}}' range-model name='age' ng-model='age' /> 
    {{age}} 
    <input type='range' min='{{age + 1}}' max='90' name='retirementAge' range-model ng-model='retirementAge' /> 
    {{retirementAge}} 
</body> 
</html> 
+0

是的,作爲一個快捷方式,現在我只是給我的範圍添加了一個'add(first,second)'方法。不理想,但它現在會做,很明顯,它應該在某個時候被刪除。 – 2013-02-28 05:57:27

+0

使用'分鐘= '{{添加(plan.age,1)}}''作品,但你必須轉換你使用它plan.age每次。通過添加一個$ parser,你可以確保模型始終是一個數字。 – 2013-02-28 06:12:42

+0

沒關係,這不是永久的。我已經針對此問題提交了拉取請求https://github.com/angular/angular.js/issues/1189 – 2013-02-28 06:21:36

相關問題