在Ionic中实际更新图标

时间:2015-12-14 18:36:47

标签: angularjs ionic

我有一个收藏夹图标,应该从大纲更改为实体,但只有在重新加载页面后才会执行此操作。
有没有办法在不重新加载页面的情况下实时更新。

它应该更新TempClass t = new TempClass("404","page not found") Map<String, Object> map = new Hashmap<String, Object> (); map.put("tempClass", t); GsonBuilder builder = new GsonBuilder().excludeFieldsWithoutExposeAnnotation() String json = builder.create().toJson(map); 以从大纲更改为实体。

ng-class

检查该值是否在本地存储中,然后返回true或false。

<i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" 
    ng-click="togglefav(office.id); $event.stopPropagation();"></i>

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
(function(angular) {
  'use strict';
  angular.module('includeExample', ['ngAnimate'])
    .controller('ExampleController', ['$scope', '$q',
      function($scope, $q) {

        $scope.office = {
          id: 'here'
        };
        //var e = JSON.parse($window.localStorage['fav']);
        var e = ['here']
        $scope.favicon = function(office) {
          return e.indexOf(office) !== -1;
        };

        $scope.togglefav = function(office) {
          if ($scope.office.id === 'here')
            $scope.office.id = 'here2';
          else
            $scope.office.id = 'here';
        };


      }
    ]);
})(window.angular);
&#13;
.ion-android-star{
 color:red;  
}
.ion-android-star-outline{
 color:blue;  
}
&#13;
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script>

<body ng-app="includeExample">
  <div ng-controller="ExampleController">
    <i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); "> Content</i> (click me)

  </div>
</body>
&#13;
&#13;
&#13;

您可以使用 office 变量中的$scope

当您更改办公室时,模板也可以看到。