无法输出范围变量angularjs答案

【问题标题】：Can't output scope variables angularjs无法输出范围变量angularjs
【发布时间】：2018-04-03 18:37:57
【问题描述】：

这是我的控制器：

window.myApp.controller("WorkersController", ['$scope', function ($scope) {
$scope.people = ['1', '123', 'dog','qwewqe'];
$scope.input='';
$scope.add = function () {
    let index = $scope.people.indexOf( $scope.input);
    if ( $scope.input && index === -1) {
        $scope.people.push( $scope.input);
        $scope.update_layers();
        $scope.input = '';
    }
};
$scope.delete = function (item) {
    let index = $scope.people.indexOf(item);
    $scope.people.splice(item, 1);
    $scope.update_layers();
};
$scope.update_layers = function () {

};}]);

这是我的看法：

<div id="p_Workers" ng-controller="WorkersController">
<div class="form-group row">
    <label class="col-1 col-form-label">С</label>
    <div class="col-10">
        <input class="form-control" type="date">
    </div>
</div>
<div class="form-group row">
    <label class="col-1 col-form-label">По</label>
    <div class="col-10">
        <input class="form-control" type="date">
    </div>
</div>
<div class="form-group row">
    <input id="add_worker" type="search" class="form-control col-9" ng-model='input' placeholder="Введите фамилию">
    <input class="form-control col-3" type="button" value="Add" ng-click="add()">
</div>
<div ng-repeat="man in people">
    {{man}}
    <input  type="button" value="X" ng-click="delete({{man}})">
</div>

我包括了角度和控制器

<script type="text/javascript" src="/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="js/controllers/WorkersController.js"></script>

结果我得到this here is the image

有人可以解释为什么 ng-repeat 不显示数组中的项目吗？看起来我的帖子主要是代码，但代码是最好的细节。

UPD：所以我修复了我的视图和控制器，所以希望它不会分散你对 ng-repeat 的注意力。maybe this can help somehow

UPD2：plunker 中的示例效果很好。但我忘了说我正在使用 phalcon。可能是电压有问题？

UPD3：电压问题。

【问题讨论】：

如果你有 angular 1.5 或 1.6 尝试将 people 更改为 $ctrl.people，控制器本身必须命名，无论如何尝试“杀死”你的范围 :) daveceddia.com/convert-scope-to-controlleras
从按钮中删除 col-3 时会发生什么？当您打开浏览器开发工具并检查 DOM 时会发生什么？它在这里工作正常：plnkr.co/edit/GiDRxQTF9m2N9rR8R5mK
如果我删除 col-3 只剩下小按钮。是的，我也在 plunker 上试过，效果很好。DOM 只有输入，前面没有文本，但 $scope 变量包含值。$ctrl.people 不起作用。

标签： angularjs phalcon

【解决方案1】：

如果您无视您的功能不起作用这一事实，因为您将$scope.people 称为$scope.peoples，对我来说效果很好。

如果一切都失败了，你可以尝试像这样定义你的 $scope：

var app = angular.module('myApp', []);
app.controller('WorkersController', function() {
  var vm = this;
  vm.addWorker = "";
  vm.people = ['Леха', '123', 'Саня'];

  vm.add = function() {
    let index = vm.people.indexOf(vm.addWorker);
    if (vm.addWorker != "" && index === -1) {
      vm.people.push(vm.addWorker);
      vm.update_layers();
      vm.addWorker = "";
    }
  };
  vm.delete = function(item) {
    let index = vm.people.indexOf(item);
    vm.people.splice(item, 1);
    vm.update_layers();
  };
  vm.update_layers = function() {

  };
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="WorkersController as controller">
    <div class="form-group row">
      <label class="col-1 col-form-label">С</label>
      <div class="col-10">
        <input class="form-control" type="date">
      </div>
    </div>
    <div class="form-group row">
      <label class="col-1 col-form-label">По</label>
      <div class="col-10">
        <input class="form-control" type="date">
      </div>
    </div>
    <div class="form-group row">
      <input id="add_worker" type="search" class="form-control col-9" placeholder="Введите фамилию" ng-model="controller.addWorker">
      <button class="btn btn-default" type="button" ng-click="controller.add()">Add</button>
    </div>
    <div ng-repeat="man in controller.people">
      {{man}}
      <button class="btn btn-default" type="button" ng-click="controller.delete(man)">X</button>
    </div>
  </div>
</body>

</html>

ng-repeat 在其中创建自己的作用域。使用ng-controller="X as controller"，您可以确保您可以使用controller.myFunction 在这些新创建的范围内调用您的控制器值。

另请注意，为您的输入字段提供模型而不是通过您现在的方式获取其数据被认为是一种很好的做法。如果您有按钮，请尝试实际使用按钮，而不是使用 as 类型按钮进行输入。按钮本身应该有很多自定义选项供您选择：

var app = angular.module('myApp', []);
app.controller('WorkersController', function($scope) {
  $scope.addWorker = "";
  $scope.people = ['Леха', '123', 'Саня'];

  $scope.add = function() {
    let index = $scope.people.indexOf($scope.addWorker);
    if ($scope.addWorker != "" && index === -1) {
      $scope.people.push($scope.addWorker);
      $scope.update_layers();
      $scope.addWorker = "";
    }
  };
  $scope.delete = function(item) {
    let index = $scope.people.indexOf(item);
    $scope.people.splice(item, 1);
    $scope.update_layers();
  };
  $scope.update_layers = function() {

  };
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="WorkersController">
    <div class="container">
      <div class="form-group row">
        <label class="col-xs-1 col-form-label">С</label>
        <div class="col-xs-11">
          <input class="form-control" type="date">
        </div>
      </div>
      <div class="form-group row">
        <label class="col-xs-1 col-form-label">По</label>
        <div class="col-xs-11">
          <input class="form-control" type="date">
        </div>
      </div>
      <div class="form-group row">
        <div class="col-xs-10">
          <input id="add_worker" type="search" class="form-control col-9" placeholder="Введите фамилию" ng-model="addWorker">
        </div>
        <div class="col-xs-2">
          <button class="btn btn-default pull-right" type="button" ng-click="add()">Add</button>
        </div>
      </div>
      <div class="row" ng-repeat="man in people">
        <label class="col-xs-10">{{man}}</label>
        <div class="col-xs-2">
          <button class="btn btn-default pull-right" type="button" ng-click="delete(man)">X</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

编辑：

阅读您的 cmets 后，我非常确信这是 AngularJS 的 {{}} 标签与使用完全相同的符号的 Volt 冲突的问题。

这将导致您的代码从 AngularJS 的角度来看是正确的结论，您需要解决这些框架之间的冲突。为此，我建议您查看以下链接：

【讨论】：

当我使用控制器作为语法没有显示任何内容时，将输入更改为按钮不会改变任何内容/
只有在控制器中定义了var x = this; 时，使用controller as 语法才有效。你是对的，它不会改变任何东西，但它被认为是一种很好的做法，因为输入意味着输入并且按钮单击不是输入，而是按钮单击。这只是一个可读性的问题，以防您将代码搁置一段时间并重新使用它，或者其他人将来使用它。如果您愿意，它还允许您为项目中的所有按钮设置自定义样式，而不必为其创建自定义类。
我尝试将 $scope 切换到此，但仍然没有效果/
那么在您在原始帖子中解释的参数之外可能有问题，因为您可以清楚地看到给出的答案中的 sn-ps 正在工作。您可以尝试将您的 ng-repeat 更改为 ng-repeat="man in people track by $index"，然后添加 {{$index}} 以检查索引选择是否有问题，但我对此表示怀疑。（输出应该是 0 - 1 - 2 - 3）
我不能这样做，因为我正在使用 phalcon。所以 Volt 抛出错误，因为它认为 {{$index}} 是 php 变量。

【解决方案2】：

在 angularjs 中使用 getElementById 方法不是一个好习惯。而是使用 ng-model 来检索数据。在函数内部，您错误地使用了数组。（$scope.people 和 $scope.peoples 是两个不同的变量）修改代码如下，

<input type="search" ng-model="worker" class="form-control col-9" 
placeholder="Введите фамилию">

改变如下功能，

$scope.add = function () {
    var value = $scope.worker;
    var index = $scope.people.indexOf(value);
    if (value && index === -1) {
        $scope.people.push(value);
        $scope.update_layers();
        $scope.worker = '';
    }
};

【讨论】：

【解决方案3】：

$scope.peoples 未在您的代码中定义。你已经定义了$scope.people。根据定义更改变量名称，它将起作用。检查https://plnkr.co/edit/0tDErSn6mcVhQhQPUfnM?p=preview

【讨论】：

这不是主要问题，我只是尝试了一些方法来检查我的问题，而忘记更改它。主要问题是 ng-repeat 中没有数组项。 link
我用 1.3.15 尝试了你的代码并且它可以工作。检查 plunker 链接。您使用的是哪个角度版本？就此而言，它的基本功能无关紧要
我使用版本": "1.6.6"
它也适用于 1.6.6。检查答案中上面提到的 plunker 链接
我在 plunker 上也试过了，但是在我的浏览器中它不起作用。