检查带有angularjs的下拉列表中是否存在值插入

时间:2015-03-04 09:57:05

标签: javascript html angularjs validation

我有一个带有angularjs的自动完成输入。此自动完成来自json,由下拉列表中的表示。我可以过滤结果并单击正确的值,但我会检查用户是否键入了一些不在下拉列表中的值,并显示错误消息。这是代码:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">       
        <div class="uk-form-row uk-width-1-1" data-ng-repeat="items in inputList.getinputList">
         <input ng-model='item.value' type="text" placeholder="Choose"/>
            <!-- WORKS OK -->
            <div class="uk-parent" data-uk-dropdown="{mode:'click'}">
                <a href="">Nav item - Works OK</a>
                <div class="uk-dropdown uk-dropdown-navbar" style="top:50px">
                <table>
                <thead>
                <tr>
                    <th>First Value</th>
                    <th>Second Value</th>
                </tr>
                </thead>
                <tbody>
                <tr data-ng-repeat="item in numberList.getList | filter:item.value" ng-click="setSelected(item)">
                    <td>{{item.first}}</td>
                    <td>{{item.last}}</td>
                </tr>
                </tbody>
            </table>
                </div>
</div>

angularjs部分

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

function MyCtrl($scope) {
    $scope.item={}
    $scope.numberList={}
    $scope.numberList.getList=[{'first':'Jon','last':'skeet'},{'first':'naeem','last':'shaikh'},{'first':'end','last':'game'}]

    $scope.inputList={}
    $scope.inputList.getinputList=[{'firstA':'AAA','lastB':'BBBB'}]

    $scope.idSelectedVote = null;
    $scope.setSelected = function (idSelectedVote) {

        $scope.idSelectedVote = idSelectedVote;
        $scope.item.value=idSelectedVote.first+' '+idSelectedVote.last;
        //alert(idSelectedVote);
    };
}

我在这里创造了一个小提琴:

http://jsfiddle.net/8y48q/22/

1 个答案:

答案 0 :(得分:1)

您可以使用

<tr  ng-show="(numberList.getList | filter:item.value).length == 0"> 
                        <td>Nothing here!</td>
                    </tr>

Fiddle