好 。 。 。我敢肯定,粗略地看一下我的代码应该使我不必解释我是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中解决此问题是另一个问题。