如何使用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>

在控制器中編寫此代碼的最佳方法是什么？

Answer 1

你使用ng-model="deadline"將它綁定到一個變量（ deadline ）。

您在控制器中的檢查變得如此簡單：

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

或者甚至可以簡化為

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

簡單的JSFiddle DEMO 。

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> 

Answer 3

您將獲得輸入中的值，

$scope.deadline

你可以檢查，

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

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>

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 = "";
    }
});

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>