javascript - Angular : pass a default value from server side

Question

我在服务器端(.NET Razor)有一个文本框，它指定了用户可以修改的谷歌地图缩放的默认半径:

<input type="number" ng-model="radius">

而且对于第一次加载，我应该有一个服务器定义(和托管)变量

<input type="number" ng-model="defaultRadius" 
       style="display: none;" value="@myDefault">

这是代码( JS FIDDLE )

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.name = 'Superhero';
  $scope.$watch('defaultRadius', function(newValue) {
    $scope.radius = newValue;
  }, true);
}

<div ng-controller="MyCtrl">Hello, {{name}}!
  <h2>Enter your radius (default {{defaultRadius}}): </h2>
  <input type="number" ng-model="radius">
  <input type="number" ng-model="defaultRadius" 
         style="display: none;" value="200">
</div>

但是这似乎不起作用...如何解决它？

Answer 1

以 Angular 方式，您应该在 Controller 中定义模型，而不是在 View 中。所以你需要在 Controller 中创建一个变量

 $scope.defaultRadius = 200';

或者还有另一个技巧可以做到这一点:ng-init="defaultRadius=200"

<input type="number" ng-model="defaultRadius" style="display: none;" ng-init="defaultRadius=200"  >

<强> Working Fiddle