JSFiddle - React, Tailwind, and code Playground

by yonet3d

HTML

<body ng-app="phonecatApp">
    <input type="text" ng-model="newPhone">
    <div ng-controller="PhoneListCtrl">
  <ul>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>
       <button ng-click="delete()">Delete</button>
      
       <button ng-click="add(newPhone)">Add</button>
</div>
</body>

JavaScript

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope) {
    
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
    $scope.delete = function() {
        $scope.phones = [];
    }
});

//Add an add function to the controller that takes the newPhone
//adds the new phone to the phones list.