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

时间:2015-08-13 12:30:02

标签: javascript angularjs

我只是想简单地找出如何检索范围信息以查看它是否在控制器中有值。

我需要能够写一个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>

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

5 个答案:

答案 0 :(得分:3)

您已使用deadline将其绑定到变量(ng-model="deadline")。

您在控制器中的检查变得如此简单:

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

或者甚至可以简化为

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

简单JSFiddle DEMO

答案 1 :(得分:1)

您将获得输入中的值as,

$scope.deadline

你可以查看,

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

答案 2 :(得分:1)

据我所知,这是:

<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>

答案 3 :(得分:0)

请查看工作示例: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 = "";
    }
});

答案 4 :(得分:0)

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

当您将范围内的依赖项注入其中时,此变量可用于控制器中的纯JavaScript。

因此$scope.deadline将提供输入该输入的文本的当前值。

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

如果您在现有功能中,例如在表单提交时检查字段验证功能,则可以使用简单的

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

就足够了。

如果您希望在输入字段更改时触发逻辑,则可以在控制器中使用$ watch指令,作为Konpat Ta Preechakul suggested,或者您可以添加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-ifng-showng-hide可能会有所帮助:< / p>

<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>