angularjs - 如果 ng-tags-input 中的查询结果为空，如何显示“未找到结果”消息？

Question

这是我的代码。如果 loadTags 返回空结果，那么有没有办法显示未找到结果消息？

 <tags-input ng-model="tags" on-invalid-tag='test'
 display-property="Name" add-from-autocomplete-only="true" 
 tabindex="3"> 

 <auto-complete source="loadTags($query)"></auto-complete>

 </tags-input>

Answer 1

我不知道您使用什么 api/data(Array) 我们必须在 ng-repeat 中使用 ng-show 在 html 中显示“未找到结果”标签这是代码

function MyCtrl($scope, $filter)
{ $scope.nodata = false;   
    $scope.items = [
        {id:1, name:'John'},
        {id:2, name:'Steve'},
        {id:3, name:'Joey'},
        {id:4, name:'Mary'},
        {id:5, name:'Marylin'}];

    $scope.items2 = $scope.items;

    $scope.$watch('search', function(val)
    { 
        console.log($filter('filter')($scope.items2, val));
        $scope.items = $filter('filter')($scope.items2, val); // items return for api after search if array is empty
        if($filter('filter')($scope.items2, val).length == 0){ // item are empty
           $scope.nodata = true;
        }
        else{
          $scope.nodata = false;   
        }
    });
};

HTML

<div ng-app>
    <div ng-controller="MyCtrl">
        <input type="text" ng-model="search">
        <table>
            <tbody>
                <div ng-show="nodata">NO results found</div>
                <tr ng-repeat="item in items">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS 代码

.no_rocord{border-color: #ececec;
border-width: 1px;
border-style: solid;
border-radius: 2px;
width: 250px;
padding: 6px;
cursor: pointer;
z-index: 9999;
position: absolute;
margin-top: -6px;
background-color: #ffffff
}

JS小提琴