我有一个文章列表和类别。我需要的只是根据所选类别更新文章列表。
我可以用所有文章填充列表,我在这方面没有问题。但是我无法填充类别选择框,也无法将函数绑定到类别列表的更改事件。
这是代码:
<script>
function contrArticles($scope, $http) {
$scope.articles = [];
$scope.categories = [];
$http({ method: 'GET', url: 'dbOps.aspx?act=articleList' }).
success(function (data, status, headers, config) {
$scope.articles = data.Table;
}).
error(function (data, status, headers, config) {
console.log('http error');
}
);
$http({ method: 'GET', url: 'dbOps.aspx?act=categoryList' }).
success(function (data, status, headers, config) {
$scope.categories = data.Table;
}).
error(function (data, status, headers, config) {
console.log('http error');
}
);
$scope.selectCategory = function () {
$http({ method: 'GET', url: 'dbOps.aspx?act=categoryList&catID=' + $scope.category}).
success(function (data, status, headers, config) {
$scope.categories= data.Table;
}).
error(function (data, status, headers, config) {
console.log('http error');
}
);
}
}
</script>
<div ng-controller="contrArticles">
<ul class="article_list">
<li ng-repeat="article in articles | filter:search">
<a href="#" title="article title here">
<span class="date">
<span class="month">{{ article.dt_month }}</span>
<span class="day">{{ article.dt_day }}</span>
<span class="year">{{ article.dt_year }}</span>
</span>
<img ng-src="images/news/{{ article.id }}.jpg" alt="{{ article.title }}" class="thumb" />
<div class="summary">
<span class="article_title">{{ article.title }}</span>
<span class="short">{{ article.content }}...</span>
</div>
</a>
</li>
<li ng-show="(articles | filter:search).length==0">No article found</li>
</ul>
</div>
<select class="combobox" ng-change="selectCategory ()" ng-model="category">
<option value="">Show all</option>
<option ng:repeat="s in sports" value="{{ s.id }}">{{ s.tag }}</option>
</select>
谢谢。