角度-更新模板中的徽章编号

Angular - update badge number in template

本文关键字：徽章 编号 更新 角度      更新时间：2023-09-26

这是我的控制器：

.controller('FilterCtrl', function($scope, $http, tagsService, speciesService) {
    $scope.tags = tagsService.getTags();
    $scope.fileNameChanged = function(event) {
        q = []
        _.each($(event).find(":selected"), function(el) {
            if ( $(el).text().trim() !== "" ) {
                q.push($(el).text().trim()) 
            }
        })
        q = q.join('&')
        s = speciesService.getList(q)
    }
})

这是一个带有相关徽章的标签：

  <ion-tab title="List" icon="icon ion-navicon-round" href="#/tab/list" badge="0" badge-style="badge-assertive">
    <ion-nav-view name="tab-list"></ion-nav-view>
  </ion-tab>

这是样品服务：

.factory('speciesService', function($http) {
  var speciesService = {};
  speciesService.data = {};
  speciesService.getList = function (q) {
   $http.get("http://localhost:8080/api/v1/species/?format=json&tags=" + q, {})
       .success(function(data, status, headers, config) {
            speciesService.data.species = data;
            console.log(speciesService.data.species.objects.length);
        })
      // .error(function(data, status, headers, config) {
      //     console.log(status)
      //     tags = [];
      //   });
      return speciesService.data;
  }
  return speciesService;

当用户在选择输入中选择选项时，我使用speciesService从服务器请求数据。然后，我想根据返回对象的计数更新徽章。

我不确定你是如何将这个物种连接到另一个模板中的徽章开关的。

假装我没有注意到您正在使用jQuery并从控制器内部访问DOM的事实：

.controller('FilterCtrl', function($scope, $http, tagsService, speciesService) {
    $scope.speciesData = speciesService.data;
    ...
<ion-tab ... badge="{{speciesData.species.length}}"
相关文章：