如果按下提交后输入字段为黑色,则会显示验证检查或以红色字母显示警告

时间:2016-03-02 16:02:36

标签: javascript html angularjs

我正在使用Angular,我有一个带有选择的下拉框和一个输入文本字段。

我希望在按下搜索按钮后需要将下拉列表作为选择,然后它将在Angular控制器中执行一个功能。如果没有选中,我希望下拉列表上方的红色文字显示为"请等等等等等等。

如何以最简单的方式实现这一目标?

这是我的观点:

<!DOCTYPE html>

<html>
<head>
<title>Asset Disposal Multi Mill Inquiry</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body><br/>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="row ">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">


        <div class="form-group">
            <select class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="mill">
                <option value="">Select a Mill </option>
                <option value="608">Tomahawk Mill</option>
                <option value="610">Valdosta Mill</option>
                <option value="620">Counce Mill</option>
                <option value="622">Filer Mill</option>
                <option value="650">DeRidder Mill</option>
                <option value="651">Wallula Mill</option>
                <option value="652">Jackson Mill</option>
                <option value="653">International Falls Mill</option>
           </select>&nbsp;
        </div>

     <div class="form-group">
                <label>Disposal Number</label>
                <input class="form-control" style="width: 92%" type="text" ng-model="id" ng-keyup="$event.keyCode == 13 && search()"/>
                <div class="form-group">
                    <br />
                    <button ng-click="search(mill)" type="button" class="btn btn-med btn-danger">
                        Search
                    </button>
                </div>
            </div>
       </div>
</div>

我的角度控制器,直到被称为搜索功能:

var AssetDisposalMultiMillInquiryController = function ($scope, $sce, $rootScope, $modal, $window, AssetDisposalService, CMMSAssetDisposalService) {


$rootScope.title = 'Asset Disposal Multi Mill Inquiry';
$scope.allMills = [];
$scope.mill = '';
$scope.disposalID = '';
$scope.requestor = '';
$scope.disposalNumber = '';
$scope.approvalStatus = '';
$scope.changeAmount = '';
$scope.amountOperator = '';
$scope.id = '';
$scope.amount = '';
$scope.approvalstatus = '';

$scope.reset = function() {
    $scope.counce = null;
    $scope.filer = null;
    $scope.tomahawk = null;
    $scope.valdosta = null;
    $scope.deridder = null;
    $scope.whiteMills = null;

};

$scope.search = function(mill) {
    //for each mill
    $scope.reset();
if ($scope.mill == "620") {
    $scope.disposalNumber = $scope.mill + "-" + $scope.id
    CMMSAssetDisposalService.searchMulti("http://localhost:52765/AssetDisposal/Search", authenticatedUser.userName.toUpperCase(), $scope.disposalNumber).then(function (results) {
           $scope.counce = results;
           $scope.counce.forEach(function (item) {
               item.disposalNumber = $sce.trustAsHtml(item.disposalNumber);
               item.jobNumber = $sce.trustAsHtml(item.jobNumber);
               item.requestor = $sce.trustAsHtml(item.requestor);
               item.description = $sce.trustAsHtml(item.description);
               item.amount = $sce.trustAsHtml(item.amount);
               item.status = $sce.trustAsHtml(item.status);
           });
       });
   }

1 个答案:

答案 0 :(得分:0)

您的意思是显示错误消息吗? 您可以使用ngMessages

小例子:

var result = Match.With<IFoo, int>(new Foo() { A = 5 })
    .When<IFoo>(foo => foo.A)
    .When<IBar>(bar => bar.B)
    .When<string>(Convert.ToInt32)
    .Result;
Assert.Equal(5, result);

var result = Match.With<int, string>(n)
    .When(x => x > 100, () => "n>100")
    .When(x => x > 10, () => "n>10")
    .Default(() => "");
Assert.Equal("n>10", result);

 var result = Match.With<int, string>(5)
     .When(1, () => "1")
     .When(5, () => "5")
     .Default(() => "e");
 Assert.Equal("5", result);