时间戳

首页 > 解决方案 > 表单结果中的动态图标

angularjs - 表单结果中的动态图标

问题描述

我换了一支笔在表单结果中添加了一个图标。它在页面加载时有效，但在您动态添加时无效。这是笔：https ://codepen.io/nathel/pen/eYNZYJN 任何帮助将不胜感激 

    <div class="panel">
        <input type="text" placeholder="Search Bookmarks" ng-model="search" />       
    </div>      
    <ul class="bookmarks">
        <li ng-repeat="site in bookmarks | filter: search">
          <a href="{{ site.url }}">
            <img ng-src="{{site.favicon}}">{{site.url}}
          </a>
          <span class="label secondary"> {{site.category}}</span>
          <i class="right icon-trash" ng-click="deleteBookmark($index)"></i> 
        </li>
    </ul>    
</div>    

var myApp = angular.module("myApp", ["favicon"]);
myApp.controller("appCtrl", ["$scope", "faviconFilter", function($scope, faviconFilter) {
  $scope.bookmarks = [
    {
      //title: 'CodePen',
      url: 'https://codepen.io',
      category: 'Web Design',
      likes: 3
    }
  ];
  $scope.increment = function ($index) {
      $scope.likes++;
   };
  $scope.addBookmark = function () {
      $scope.bookmarks.push({
          title: $scope.site_name,
          url: $scope.site_url,
          category: $scope.site_category,
          likes: 0
      });
      $scope.site_name = '';
      $scope.site_url = '';
      $scope.site_category = '';
  };
  $scope.bookmarks.forEach( function(bookmarks) {
    bookmarks.favicon = faviconFilter(bookmarks.url);
  });

  $scope.deleteBookmark = function (id) {
      var bookmark = $scope.bookmarks[id];
      $scope.bookmarks.splice(id, 1);
  };
}]);

标签： angularjsfavicon

解决方案

它在页面加载时有效，但在您动态添加时无效。

favicon在函数中为推送的对象添加一个属性addBookmark：

 $scope.addBookmark = function () {
      $scope.bookmarks.push({
          title: $scope.site_name,
          url: $scope.site_url,
          category: $scope.site_category,
          likes: 0,
          //IMPORTANT
          favicon: faviconFilter($scope.site_url)
      });
      $scope.site_name = '';
      $scope.site_url = '';
      $scope.site_category = '';
  };

推荐阅读