JSFiddle - React, Tailwind, and code Playground

by Stephen

HTML

<div ng-app="app" ng-controller="AnimalController">
    <form ng-submit="submit()">
      <h4>Brown animals</h4>
      <div ng-repeat="animal in animals | filter:{color:'brown'}">
        <span>{{animal.name}}</span><input type="checkbox" ng-model="animal.checked" />
      </div>
      <h4>Cute animals</h4>
      <div ng-repeat="animal in animals | filter:{cute:true}">
        <span>{{animal.name}}</span><input type="checkbox" ng-model="animal.checked" />
      </div>
      <input type="submit" />
    </form>
    {{ids}}
</div>

JavaScript

var app = angular.module('app', []);
app.controller('AnimalController', function($scope, $http) {
    //you'd use $http to get your data from server
    $scope.animals = [
    	{id:1, name:"cow", color: "blue", cute: false},
      {id:2, name:"dog", color: "brown", cute: true},
      {id:3, name:"cat", color: "brown", cute: true},
      {id:4, name:"rabbit", color: "grey", cute: true},
      {id:5, name:"bull", color: "brown", cute: false},
    ];
    
    $scope.submit = function() {
    	 $scope.ids = $scope.animals.filter(function(a) { return a["checked"] }).map(function(a) { return a.id })
       //post array to server
    }
});