0

在函数 $scope.addTodo() 中，我的浏览器仅在 $scope.todos 数组的第一个条目上评估 if 语句。创建单个待办事项后，我现在可以推送空白待办事项，即使这不是预期的结果。也很奇怪的是，如果我将 if 语句从

if ($scope.formTodoText != null)

至

if ($scope.formTodoText != "")

然后我可以提交一个空白的待办事项，但只能提交一次。提交初始空白待办事项后，评估就没有问题了。

<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style type="text/css">
  .done-true {
    text-decoration: line-through;
    color: grey;
  }
</style> 

</head>
<body>

  <div ng-controller="TodoCtrl" class="container">

    <h2>Total Todos: {{getTotalTodos()}}</h2>
    <ul class="unstyled">
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done"> 
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form class="form-horizontal">
      <input type="text" ng-model="formTodoText" ng-model-instant>
      <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
    </form>
    <button class="btn-large" ng-click="clearCompleted()"> <i class="icon-trash"></i> Clear</button>
  </div>
  <script type="text/javascript">
    function TodoCtrl($scope) {


      $scope.todos = [
        {text: 'Learn angular', done: false},
        {text: 'Build an app', done: false},
        {text: 'Design UI', done: false}
      ];

      $scope.getTotalTodos = function() {
        return $scope.totalTodos = $scope.todos.length;
      };

      $scope.clearCompleted = function () {
        $scope.todos = _.filter($scope.todos, function (todo) {
            return !todo.done;
        });
      };

      $scope.addTodo = function() {
        if ($scope.formTodoText != null) {
            $scope.todos.push({text:$scope.formTodoText, done: false});
            $scope.formTodoText = "";
        }
      };
    }

  </script>
</body>
</html>
4

1 回答 1

2

首先，您应该使用!==and===运算符（而不是!=and==运算符）在 JavaScript 中进行比较。

您可能还会发现console.log这很方便。尝试添加

    console.log($scope.formTodoText);

作为$scope.addTodo函数体的第一行来查看它包含的内容。

对于第一种情况，您使用的是：

    if ($scope.formTodoText != null) {

最初，我们不能提交空的待办事项（不对输入字段进行某种编辑），因为$scope.formTodoTextis undefined. 这会导致if ($scope.formTodoText != null)检查失败，因此不会被添加。但是，如果你在输入框中输入一些字符，然后删除它们，你会发现仍然可以添加空的 todo，因为$scope.formTodoText会变成空字符串和'' != null，所以我们输入if正文并添加空的 todo。

现在，假设我们创建了一个非空的 todo。这调用了$scope.addTodo函数。由于$scope.formTodoText不为空，这会将待办事项推送到列表中。然后，它重置$scope.formTodoText为空字符串。这就是为什么我们能够在不编辑输入字段内容的情况下从这里添加空待办事项的原因，因为$scope.formTodoText设置为空字符串并且'' != null

相反，我们使用：

    if ($scope.formTodoText != '') {

然后单击添加按钮（在此之前不对输入字段进行任何操作），然后$scope.formTodoText将是undefined， 和undefined != ''，所以我们进入if语句的主体。紧随其后的是{text: undefined, done: false}into $scope.todos。之后，$scope.formTodoText设置为空字符串，并且从此时起添加作为空字符串的 todos 失败。

为了防止空待办事项，一种方法是将条件更改为：

    if ($scope.formTodoText) {

所以$scope.formTodoText将检查这$scope.formTodoText是一个“真实”值，它会自动排除“虚假”值，特别undefined是空字符串。有关真值和假值的更多信息，请参阅http://docs.nodejitsu.com/articles/javascript-conventions/what-are-truthy-and-falsy-values

于 2013-07-06T12:41:12.483 回答