Question

我第一次学习如何使用AngularJS开发课程，我试图理解为什么我没有获得长度属性的更新值，并希望有人能帮助我理解为什么我的代码不起作用以及我应该做些什么来更新它。

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
    <title>Grocery List</title>
    <script src="js/angular.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app>
    <h1>My Grocery List</h1>
    <div ng-controller="MYController">
        <input type="text" ng-model="listItem" placeholder="Add Grocery Item" />
        <input type="submit" ng-click="addItem()" value="Save" />
        <h2>Items</h2>
        <ul ng-show="itemArray.length">
            <li ng-repeat="listItem in itemArray">
                {{ listItem }}
                <buton ng-click="deleteItem(listItem)">X</buton>
            </li>
        </ul>
    </div>
</body>
</html>

app.js中的代码

function MYController($scope) {
    $scope.listItem;
    $scope.itemArray = [];

    $scope.addItem = function() {
        $scope.itemArray.push($scope.listItem);
        $scope.listItem = '';
    }

    $scope.deleteItem = function(deletedItem) {
        var idx = $scope.itemArray.indexOf(deletedItem);
        $scope.itemArray.splice(idx, 1);
    }
}

Answer 1

在Angular中，当你制作控制器时，它需要分配一个模块

所以在这里你将把控制器放在js中，如下所示

angular.module('todoApp', []) 
 .controller('MYController', ['$scope', function($scope) {
   $scope.listItem;

    $scope.itemArray = [];

    $scope.addItem = function() {
        $scope.itemArray.push($scope.listItem);
        $scope.listItem = '';
    }

    $scope.deleteItem = function(deletedItem) {
        var idx = $scope.itemArray.indexOf(deletedItem);
        $scope.itemArray.splice(idx, 1);
    }
});

在HTML bootstrap中，如下所示在body标签中使用你的控制器

<body ng-app="todoApp">

请参阅此处以参考 https://angularjs.org/#add-some-control

Answer 2

我认为listItem和ng-model="listItem"中的ng-repeat="listItem in itemArray"之间可能存在一些混淆。尝试将第二个更改为不同的变量名称，如下所示：

        <li ng-repeat="item in itemArray">
            {{ item }}
            <button ng-click="deleteItem(item)">X</button>
        </li>

另外，将控制器$scope.listItem;中的第一行更改为$scope.listItem = '';。

Answer 3

使用以下代码将模块分配给angular app：

var app = angular.module('plunker', [])

和

<html ng-app="plunker">

see plunker

试图显示列表数组的长度值

3 个答案: