Ang Exc - News feeds - Template

by Ashvin Suthar

HTML

<div ng-app="app">
  <div ng-controller="ctrl">
    <ul>
      <li ng-if='feeds.length === 0'>No feed available</li>
      
      <li class="feed" ng-repeat="feed in feeds" ng-class="{ isDeleting : feed.isDeleting}">
      <input type="checkbox" ng-model="feed.isRead" ng-value="true" ng-change="onFeedRead(feed)"/>
        {{feed.title}}
      </li>
    </ul>
  </div>
</div>

CSS

.isDeleting{
  
  color: green;
}

JavaScript

const API_URL = 'https://rss2json.com/api.json?rss_url=https://www.nasa.gov/rss/dyn/breaking_news.rss';

function Ctrl($scope, $http, $timeout){

  $scope.feeds = [];
  
  $http
  	.get(API_URL)
  	.then(res => {
      $scope.feeds = res.data.items;
    });
  
  $scope.onFeedRead = function(feed){
  	
    feed.isDeleting = true;
    
  	if(feed.isRead){
    	$timeout(() => {
    		let index = $scope.feeds.indexOf(feed);
    		$scope.feeds.splice(index, 1);
      }, 1000);
    }
    
  }
}


angular.module('app', []).controller('ctrl', Ctrl);