Question

这是我的控制器：

func inWdomain(wdomains []string, domain string) bool {
    for _, suffix := range wdomains {
        if strings.HasSuffix(domain, suffix) {
            return true
        }
    }
    return false
}

以下是我的观点：

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>

结果我得到this here is the image

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

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

UPD2：plunker的例子很好。但我忘了说我正在使用phalcon。也许伏特有一些问题？

UPD3：伏特问题。

Answer 1

您的代码中未定义

$scope.peoples。你定义了$scope.people。根据定义更改变量名称，它将起作用。查看https://plnkr.co/edit/0tDErSn6mcVhQhQPUfnM?p=preview

Answer 2

如果你因为你将$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在这些新创建的范围内调用控制器值。

另请注意，将输入字段设为模型而不是通过现在的方式获取数据，这被认为是一种好习惯。如果你有按钮，尝试使用按钮而不是使用类型按钮进行输入。按钮本身应该有足够的自定义选项供您获得所需：

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>

修改

在阅读完你的评论后，我非常确信这是AngularJS的{{}}标签与Volt冲突的问题，使用完全相同的表示法。

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

How to integrate javascript to .volt template engine of phalcon php

Changing Volt expression tags

Answer 3

对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 = '';
    }
};

无法输出范围变量angularjs

3 个答案: