好 。 。 。我敢肯定,粗略地看一下我的代码应该使我不必解释我是Angular的新手。

我正在构建一个允许用户搜索文本的应用程序,当文本输入的值更改时查询数据库,然后生成匹配项列表。后端很简单,正在运行。在最前面,我有搜索字段和结果容器:

<div id="search" ng-controller="FormController">
    <input type="text" class="form-control input-lg" placeholder="Start typing . . ." ng-keypress="search()" ng-model="searchField" id="search-field">

    <div id="results" class="alert alert-success">
        <a href="#" ng-href="#" ng-repeat="item in items" ng-click="add(item)">
            <p class="lead text-left">
                <span>{{item.DisplayName}} -</span>
                <span> {{item.Description}} -</span>
                <span> {{item.Count}} ct. -</span>
                <span> ${{item.Price}}</span>
                <span class="glyphicon glyphicon-check pull-right"></span>
            </p>
        </a>
        <h4>{{noResults}}</h4>
    </div>
</div>


在我的控制器中调用了两种方法:

$scope.search = function()
{
    $scope.$watch('searchField', function (newValue)
    {
        if (newValue)
        {
            $http.post('/search',
            {
                val: newValue
            })
            .success(function (response)
            {
                if (response.length > 0)
                {
                    $scope.items = response;
                    $scope.noResults = '';

                }
                else
                {
                    $scope.noResults = 'No Matches Found';
                    $scope.items = '';
                }
            })
            .error(function (response)
            {
                console.log('Oooops, error: ' + response);
            });
        }
    });
};

$scope.add = function(item)
{
    console.log('added');
};


$scope.search()可能有点混乱,但仍在工作。但是,单击时不会调用add()方法。我猜我当时根本不在控制器的范围内,但是经过大量搜索之后,我转向了您,感到困惑。我正处于“敲击键盘,希望它能神奇地工作”的阶段。

这是继承问题吗?

**更新**
这是整个控制器(根据注释的建议删除了$watch):

var app = angular.module('AppModule', ['toastr']);

app.controller('FormController', ['$scope', '$http', 'toastr', function($scope, $http, toastr)
{

    $scope.search = function()
    {
        var searchText = $scope.searchField;

        $http.post('/search',
        {
            val: $scope.searchField
        })
        .success(function (response)
        {
            if (response.length > 0)
            {
                $scope.items = response;
                $scope.noResults = '';

            }
            else
            {
                $scope.noResults = 'No Matches Found';
                $scope.items = '';
            }
        })
        .error(function (response)
        {
            console.log('Oooops, error: ' + response);
        });
    };

    $scope.add = function(item)
    {
        console.log('added');
    };

}]);


更新2

Here是个笨拙的工具,显示直到add()方法,一切都在工作(我可能在此版本中已重命名该方法)。当然,代替我的$http帖子,我已经对来自服务器的响应的伪造进行了硬编码。

最佳答案

CSS问题。注释掉CSS的第8382行(将#results显示设置为none)。这样就可以了。最终如何在CSS中解决此问题是另一个问题。

07-21 12:50
查看更多