【问题标题】:ng-repeat and select box filteringng-repeat 和选择框过滤
【发布时间】:2013-06-14 23:02:12
【问题描述】:

我有一个文章列表和类别。我只需要根据所选类别更新文章列表。

我可以用所有文章填充列表,这部分我没有问题。但我无法填充类别选择框,也无法将函数绑定到类别列表的 on change 事件。

代码如下:

<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>

谢谢。

【问题讨论】:

  • 我发现了问题,我将选择框放在了控制器之外,但我没有注意到。我也使用了 ng-select 并解决了这个问题。

标签: angularjs angular-ui angularjs-ng-repeat ng-repeat


【解决方案1】:

$scope.selectCategory 中有语法错误。这个:

'dbOps.aspx?act=categoryList&catID='$scope.category}).

应该是:

'dbOps.aspx?act=categoryList&catID=' + $scope.category}).

【讨论】:

  • 我注意到并修复了,但选择框仍然是空的,并且更改不会被触发。
  • 我建议在您的选择中使用推荐的ng-options,而不是ng-repeat。你能用一些示例数据发布你的代码演示吗?
  • 我发现了问题,我把选择框放在控制器外面,我没有注意到。我也使用了 ng-select 并解决了这个问题。
猜你喜欢
  • 1970-01-01
  • 2015-06-26
  • 1970-01-01
  • 2014-03-08
  • 2016-10-14
  • 1970-01-01
  • 2013-05-25
  • 2018-04-30
  • 1970-01-01
相关资源
最近更新 更多