如何使用AngularJS在控制器中检查输入字段是否具有值

Question

我想了解如何在控制器中检索作用域信息，以查看它是否具有值。

我需要编写一个if语句，如果文本输入框已填充则执行某些操作，否则执行另外一些操作。

<form name="deadlineForm">
    <div class="app-select-date">
        <label for="deadline">Select deadline:</label>
        <input pickadate ng-model="deadline" format="dd/mm/yyyy" placeholder="Select deadline"/>
    </div>
</form>

在控制器中编写此代码的最佳方式是什么？

- Max Lynn

Answer 1

您将其绑定到一个变量 (deadline) 上，使用 ng-model="deadline"。

在控制器中，您的检查变得非常简单：

if ($scope.deadline != null && $scope.deadline != "") {
    //do something
}

这甚至可以简化为：

if ($scope.deadline) {
    //do something
}

一个简单的JSFiddle演示。

- SDekov

---

如果您添加一个fiddle，我会将其作为正确答案提交通过。 :) - Max Lynn

太好了！感谢大家的帮助！ - Max Lynn

Answer 2

这个对你有用吗？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
  angular.module('app', [])
  .controller('MainCtrl', function ($scope) {
    
    $scope.$watch('val', function (now, old) {
      if (now) {
        $scope.result = 'there is something';
      } else {
        $scope.result = 'there is nothing';
      }
    });
  });
</script>

<div ng-app='app' ng-controller='MainCtrl'>
  <input type="text" ng-model="val">  
  <span ng-bind='result'>
</div>
  

- Phizaz

---

使用 $watch 是一项昂贵的操作，从我的角度来看，应该尽可能避免使用。 - Kushal

你似乎是对的..我也这么认为..但如果有另一种方法在不使用它的情况下触发JavaScript代码，我也很想听听 :D - Phizaz

Answer 3

您将获得输入中的值，如下所示：

$scope.deadline

你可以检查如下，

if($scope.deadline) {  //or whatever condition you have to check null or empty
   //anything you want to do
}

- Hmahwish

Answer 4

根据我理解，这里的意思是：

。

<form name="deadlineForm">
    <div class="app-select-date" ng-if="deadline && deadline != ''">
        <label for="deadline">Select deadline:</label>
        <input pickadate ng-model="deadline" format="dd/mm/yyyy" placeholder="Select deadline"/>
    </div>
    <div ng-if="!deadline && deadline == ''">do something else</div>
</form>

- Kushal

Answer 5

请查看工作示例：DEMO HTML：

<p>Data {{deadline}}!</p>
<div ng-if="deadline">There is date</div>
<div ng-if="!deadline">There is no date</div>

Only for testing
<button ng-click="makeDateEmpty()">Empty data</button>

控制器：

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

app.controller('MainCtrl', function($scope) {
    $scope.deadline = '02/02/2002';
    //For testing only
    $scope.makeDateEmpty = function () {
           $scope.deadline = "";
    }
});

- User2

Answer 6

使用ng-model会自动将输入框中输入的任何值绑定到同名的$scope变量。

当您在控制器中注入依赖项时，该变量将对纯JavaScript可用。

因此，$scope.deadline将给出输入框中当前输入文本的值。

如何检查该值取决于您想要检查它的上下文。

如果您在现有函数中（例如，在表单提交时检查字段验证的函数），则可以简单地使用：

if ($scope.deadline) {
   // do something
} else {
  // do something else
}

这就足够了。

如果你想在输入字段改变的那一刻触发你的逻辑，你可以在控制器中使用 $watch 指令，就像 Konpat Ta Preechakul 建议的那样，或者你可以在输入框中添加 ng-change 或 ng-blur 属性，并调用控制器端的函数：

<input pickadate ng-model="deadline" format="dd/mm/yyyy" placeholder="Select deadline" ng-change="selectedDate()"/>

和

$scope.selectedDate = function(){
    if ($scope.deadline) {
       // do something
    } else {
      // do something else
    }
}

如果您想要在视图中直接发生条件逻辑，并实时绑定到输入字段中的值，则ng-if、ng-show和ng-hide很有帮助：

<span ng-show="deadline">Show this if deadline has a value</span>
<span ng-hide="deadline">Don't show this if deadline has a value</span>
<span ng-if="!deadline">Don't render this into the DOM at all if deadline doesn't have a value</span>

- Beofett