无法输出范围变量 angularjs

这是我的控制器：

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>

结果我得到的是图像

有人能解释为什么ng repeat不显示数组中的项目吗？看起来我的帖子大部分都是代码，但代码是最好的细节。

UPD：所以我修复了我的视图和控制器，所以希望它不会分散你对ng-rerepeat的注意力。也许这可以在某种程度上帮助

UPD2：plunker中的例子效果很好。但我忘了说我在用阳具。也许伏特有什么问题？

UPD3：电压问题。

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

将getElementById方法与angularjs一起使用不是一个好的做法。相反，使用ng模型来检索数据。在函数内部，您错误地使用了数组。($scope.people和$scope.ppeople是两个不同的变量)更改代码如下，

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

如果您因为将$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 type按钮进行输入。按钮本身应该有很多定制选项，让你得到你想要的：

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的角度来看，您的代码是正确的，您需要解决这些框架之间的冲突。为此，我建议您查看以下链接：

如何将javascript集成到phalcon-php 的.volt模板引擎
更改电压表达标签

相关内容

最新更新

热门标签：