Question

我在Angular控制器上有以下内容：

application.controller('ImageController', function ImageController($scope, ImageService) {

  $scope.model = {
    images: [],
    multiple: false
  }

  $scope.$watch('model.multiple', function (newVal, oldVal) {
    console.log(newVal);
    console.log(oldVal);
  });

}

我需要从隐藏的输入中获取$ scope.model.multiple值。

隐藏的输入值从服务器端填充。所以对于测试，我有：

<input type="hidden" data-ng-model="model.multiple" data-ng-value="true" />

当我运行我的代码时，newVal和oldVal都是假的......为什么？

Answer 1

如果您正在填充输入隐藏服务器端的值并希望它在Angular中可用，请执行以Angular方式加载带有值的JSON，或者如果您没有＆＃39 ; t可以访问后端，或者如果您不想更改代码，请使用以下标识呈现模板：

<input type='hidden' id='hiddenValue' value='xx(server-side)xx'>

然后在控制器里面放了类似的东西：

$scope.value = document.getElementById('hiddenValue');

Answer 2

我不认为ngValue会按照您的想法行事。它适用于选项（在选择中）和单选按钮。 See docs here

简短回答：$ scope。$ watch中的值为false，因为您在控制器中将$ scope.model.multiple设置为false，并且视图中的隐藏输入不会如你所希望的那样绑定到模型。

在您的代码中，我认为您正试图在您的视图中无缘无故地设置model.multiple的值，并且以一种无法实现的方式。

我认为你应该在控制器中将值设置为true。我没有看到为什么你需要在一个隐藏的输入中处理它的任何理由。你提到它来自服务器＆＃34;，但视图由AngularJS呈现 - 而不是其他服务器。

输入上的双向绑定的目的是使用户编辑将反映在模型中。因为它们不是用户可编辑的，所以对隐藏的输入似乎没有任何绑定。隐藏的输入用于表单提交，Angular不会这样做。表格在Angular中有不同的用途。

查看此Plunk以查看hidden inputs don't impact the model。视图：

<body ng-controller="MainCtrl">
  <input type="hidden" ng-model="model.multiple" ng-value="true" value="true" />
  <input type="hidden" ng-model="model.test" />Hidden inputs have no impact on the model.
  <br>That's why this is blank: '{{model.test}}'
</body>

控制器：

app.controller('MainCtrl', function($scope) {
  $scope.model = {
    images: [],
    multiple: false
  }

  $scope.$watch('model.multiple', function(newVal, oldVal) {
    console.log('New: ' + newVal);
    console.log('Old: ' + oldVal);
  });
});

Answer 3

您可以使用ngInit指令代替ngValue指令。这就是您如何做到的。

ng-init="model.multiple=true"

Answer 4

您可以将值设置为全局变量，如

<script>
   window.model = {multiple: true};
</script>

然后在你的控制器中添加$ window并设置像这样的值

application.controller('ImageController', function ImageController($scope,  $window, ImageService) {

$scope.model = {
    images: [],
    multiple: $window.model.multiple
   }

如此处所述Angular js init ng-model from default values

从隐藏的输入值填充范围变量

4 个答案: