Angularjs 为什么这个有角度的js todo应用程序只检查一次if语句？

在函数$scope.addTodo（）中，我的浏览器仅在$scope.todos数组的第一个条目上计算if语句。创建单个todo后，现在可以推送空白todo，即使这不是期望的结果。奇怪的是，如果我将if语句从

if（$scope.formTodoText！=null）

到

if（$scope.formTodoText！=“”）

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

JS-Bin
.真的{
文字装饰：线条贯通；
颜色：灰色；
}
待办事项总数：{{getTotalTodos（）}}


{{todo.text}


添加
清楚的
函数TodoCtrl（$scope）{
$scope.todos=[
{文本：“学习角度”，完成：false}，
{text:'构建应用程序'，完成：false}，
{text:'Design UI'，done:false}
];
$scope.getTotalDos=函数（）{
返回$scope.totalTodos=$scope.todos.length；
};
$scope.clearCompleted=函数（）{
$scope.todos=\.filter（$scope.todos，函数（todo）{
返回！todo.done；
});
};
$scope.addTodo=函数（）{
如果（$scope.formTodoText！=null）{
$scope.todos.push（{text:$scope.formTodoText，done:false}）；
$scope.formTodoText=“”；
}
};
}

首先，您应该使用

==和
==
运算符（而不是
！=
和
==
运算符），用于在JavaScript中进行比较

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

    console.log($scope.formTodoText);

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

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

    if ($scope.formTodoText != null) {

最初，我们不能提交空todo（不在输入字段上进行某种编辑），因为
$scope.formTodoText
是
未定义的
。这会导致
if（$scope.formTodoText！=null）
检查失败，因此不会添加它。但是，如果您在输入字段中键入一些字符，然后将其删除，您会发现仍然可以添加空TODO，因为
$scope.formTodoText
将成为空字符串，
'=null
，因此我们输入
if
主体并添加空todo

现在，假设我们创建一个非空的todo。这将调用
$scope.addTodo
函数。由于
$scope.formTodoText
不为空，这会将todo推到列表上。然后，它将
$scope.formTodoText
重置为空字符串。这就是为什么我们能够从这里开始添加空TODO而不编辑输入字段的内容的原因，因为
$scope.formTodoText
被设置为空字符串并且
'=空

如果相反，我们使用：

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

然后单击添加按钮（在此之前不对输入字段执行任何操作），然后
$scope.formTodoText
将
未定义
，并且
未定义！=''
，因此我们进入
if
语句的主体。然后将
{text:undefined，done:false}
推入
$scope.todos
。在此之后，
$scope.formTodoText
被设置为空字符串，添加作为空字符串的TODO将从此点开始失败

要防止TODO为空，一种方法是将条件更改为：

    if ($scope.formTodoText) {

因此，
$scope.formTodoText
将检查
$scope.formTodoText
是否为“truthy”值，它会自动排除“falsy”值，特别是
未定义的
和空字符串。有关truthy和falsy值的更多信息，请参见
ng model instant
来自何处？可能的重复项