Angular JS表达式没有评估

时间:2016-06-22 18:55:39

标签: javascript angularjs

我有以下简单的Angular JS跟踪,其中包含基本的CRUD操作:

<html>
<head>
    <title>CRUD</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
    <div ng-app>
        Simple Expression Evaluator:<br/>
        <input ng-model="calculator"/><br/>
        {{calculator + "=" + $eval(calculator)}}
    </div>
    <h3>CRUD - Comments</h3>
    <div ng-app="commentapp">
      <ul ng-controller="commentController">
        <li ng-repeat="user in users">
          {{user.name}} wrote "{{user.comment}}"
          <br/><a href="#" ng-click="remove(user)">Delete</a>
          <a href="#" ng-click="edit(user)">Edit</a>
        </li>
        <li>
          <input id="name" ng-model="current.name" value="{{current.name}}" />
          <input id="name" ng-model="current.comment" value="{{current.comment}}" />
        </li>
        <li>
          <button ng-click="save(current)">
            Save
          </button>
          <button ng-click="addNew(current)">
            Add New User
          </button>
        </li>
      </ul>
    </div>
    <script>
        var app = angular.module("commentapp", []);
        app.controller("commentController", function($scope) {
          $scope.users = [{
            "name": "Qwe",
            "comment": "Great!"
          }];
          $scope.current = {};
          $scope.addNew = function(user) {
            $scope.users.push(user);
          };
          $scope.edit = function(user) {
            $scope.current = user;
          };
          $scope.save = function(user) {
            $scope.current = {};
          };
          $scope.remove = function(user) {
            var index = $scope.users.indexOf(user);
            $scope.users.splice(index, 1);
          };
        });
    </script>
</body>
</html>

然而输出显示:

enter image description here

因此,表达式求值程序完美运行,这意味着Angular JS正确绑定。但其余组件根本不起作用。而不是Qwe,我得到了表达式{{user.name}}。我在这做错了什么?

1 个答案:

答案 0 :(得分:1)

您好我尝试了您的脚本,并且在删除第一个ng-app

时似乎正常工作

nov html部分是这样的

<h3>CRUD - Comments</h3>
    <div ng-app="commentapp">
      <ul ng-controller="commentController">
        <li ng-repeat="user in users">
          {{user.name}} wrote "{{user.comment}}"
          <br/><a href="#" ng-click="remove(user)">Delete</a>
          <a href="#" ng-click="edit(user)">Edit</a>
        </li>
        <li>
          <input id="name" ng-model="current.name" value="{{current.name}}" />
          <input id="name" ng-model="current.comment" value="{{current.comment}}" />
        </li>
        <li>
          <button ng-click="save(current)">
            Save
          </button>
          <button ng-click="addNew(current)">
            Add New User
          </button>
        </li>
      </ul>
    </div>

查看此fiddle

希望这个帮助