Javascript 如何使用 AngularJS 检查输入字段在控制器中是否有值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31988314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to check if a input field has a value in the controller using AngularJS
提问by Max Lynn
I'm quite simply trying to find out how I can retrieve the scopes information to see if it has a value or not in the controller.
我只是想找出如何检索范围信息以查看它在控制器中是否有值。
I need to be able to write an if statement that says if this text input field is filled do this... if else do something different.
我需要能够编写一个 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>
What is the best way about writing this code in the controller?
在控制器中编写此代码的最佳方法是什么？
采纳答案by SDekov
You have it bound to a variable (deadline) using ng-model="deadline".
您使用 将它绑定到一个变量 ( deadline) ng-model="deadline"。
Your check in the controller becomes as simple as:
您在控制器中的检查变得如此简单：
if ($scope.deadline != null && $scope.deadline != "") {
//do something
}
or this can be even simplified to
或者这甚至可以简化为
if ($scope.deadline) {
//do something
}
Simple JSFiddle DEMO.
简单的JSFiddle 演示。
回答by Phizaz
Will this work for you ?
这对你有用吗？
<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>
回答by Hmahwish
You will get the value in the input as,
您将获得输入中的值，
$scope.deadline
you can check as ,
你可以检查为，
if($scope.deadline) { //or whatever condition you have to check null or empty
//anything you want to do
}
回答by Kushal
As from what I understand here it is:
据我了解这里是：
<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>
回答by User2
Please check working example : DEMO
请检查工作示例：DEMO
HTML:
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>
Controller:
控制器：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.deadline = '02/02/2002';
//For testing only
$scope.makeDateEmpty = function () {
$scope.deadline = "";
}
});
回答by Beofett
Using ng-model automatically binds any value entered into the input to a $scope variable of the same name.
使用 ng-model 自动将输入到输入中的任何值绑定到同名的 $scope 变量。
This variable becomes available to plain JavaScript within your controller when you inject a dependency upon scope into it.
当您向控制器中注入对作用域的依赖时，此变量可用于控制器中的纯 JavaScript。
So $scope.deadlinewill give the current value of text entered into that input.
So$scope.deadline将给出输入到该输入中的文本的当前值。
How you check that value depends on the context of whenyou'd like to check it.
你如何检查值取决于上下文，当你想检查一下。
If you're in an existing function, such as a function checking field validation upon form submission, a simple
如果您在现有功能中，例如在表单提交时检查字段验证的功能，一个简单的
if ($scope.deadline) {
// do something
} else {
// do something else
}
would suffice.
就足够了。
If you're looking to trigger your logic the moment that input field changes, in the controller you could use the $watch directive, as Konpat Ta Preechakul suggested, or you could add an ng-change or ng-blur attribute to your input, and call a controller-side function:
如果您希望在输入字段更改时触发您的逻辑，您可以在控制器中使用 $watch 指令，正如Konpat Ta Preechakul 建议的那样，或者您可以向您的输入添加 ng-change 或 ng-blur 属性，并调用控制器端函数：
<input pickadate ng-model="deadline" format="dd/mm/yyyy" placeholder="Select deadline" ng-change="selectedDate()"/>
and
和
$scope.selectedDate = function(){
if ($scope.deadline) {
// do something
} else {
// do something else
}
}
If you want conditional logic to occur directly in the view, bound real-time to values in the input field, then ng-if, ng-show, and ng-hidecan be helpful:
如果你想条件逻辑在视图中直接出现，势必实时值输入字段，然后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>
