AngularJS文本建议文本框

Question

我正在使用angularjs编写文本建议文本框。

下面是我的网页html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/angular.js"></script>
    <script type="text/javascript" src="Scripts/angular-mocks.js"></script>
    <script type="text/javascript" src="BaseCtrl.js"></script>
</head>
<body ng-controller="BaseController">
    <div class="input-group" style="width: 50%;">
        <input type="text" class="form-control" id="FirstName" ng-model="fnamequery" ng-change="toggleSuggest()">
        <p ng-repeat="fname in fnames | filter:fnamequery">{{fname}}</p>

    </div>
</body>
</html>

这是我的控制器文件BaseCtrl.js：

angular.module('TextApp',[]).controller('BaseController', function($scope, $http) {
$scope.fnames =  ["Aida", "Aidan", "Alla", "Allen", "Beverly", "Bea", "Caleb", "Catherine"];
$scope.toggleSuggest = function () {
    console.log($scope.fnamequery);
    if ($scope.fnamequery == '') $('p').hide();
    else $('p').show();
}
});

将来，我计划通过Web调用从数据库中提取名称，但现在我只是尝试让它使用硬编码的值。

现在我得到页面上显示的所有值。在我输入某些内容时，这些值确实会被过滤掉，但是最初，所有的内容都会显示出来。

Answer 1

您正在使用$('p').hide()和$('p').show()来隐藏/显示DOM元素，在我看来，这些元素更像jQuery方法。您的代码示例正在抛出此错误：

ReferenceError：$未在Object.MyCtrl.$scope.toggleSuggest中定义

在这种情况下，Angular的ng-show或ng-hide指令应该能起作用：

<body ng-controller="BaseController">
    <div class="input-group" style="width: 50%;">
        <input type="text" ng-model="fnamequery">
        <p ng-repeat="fname in fnames | filter:fnamequery" ng-hide="fnamequery==''">{{fname}}</p>
    </div>
</body>

主计长：

function BaseController($scope, $http) {
    $scope.fnamequery = '';
    $scope.fnames = ["Aida", "Aidan", "Alla", "Allen", "Beverly", "Bea", "Caleb","Catherine"];
}

这里是一个工作的jsFiddle.