JSFiddle - React, Tailwind, and code Playground

by bullgare

HTML

<div ng-app>
    <div ng-controller="HeroCtrl">
        <ul>
            <li ng-repeat="hero in heroes">
                <img ng-src="{{hero.imgSrc}}" width="100" /> 
                {{hero.first}} {{hero.last}} 
            </li>
        </ul>

    </div>
    
    
    
    <div ng-controller="ACtrl">
        <ul>
            <li ng-repeat="item in get()">
                {{item}}
            </li>
        </ul>
        <form>
            <input type="text" ng-model="newVal" />
            <button class="btn btn-primary" ng-disabled="!newVal" ng-click="add()">add</button> 
        </form>
    </div>
</div>

CSS

<form>
            <input type="text" ng-model="newFirst" />
            <input type="text" ng-model="newLast" />
            <input type="text" ng-model="newImg" />
            <button class="btn btn-primary" ng-disabled="! isValid()" ng-click="add()">add</button> 
        </form>


    $scope.newFirst = '';
    $scope.newLast = '';
    $scope.newImg = '';
    
    $scope.isValid = function ()
    {
        return $scope.newFirst.length && $scope.newLast.length && $scope.newImg.length;
    };
    
    $scope.add = function ()
    {
        var h = {
            first: $scope.newFirst,
            last: $scope.newLast,
            imgSrc: $scope.newImg
        };
        $scope.heroes.push(h);
        $scope.newFirst = $scope.newLast = $scope.newImg = '';
    };



                <button ng-click="remove(hero)" />
    $scope.remove = function (hero) 
    {
        console.log(hero);
            for (var h in $scope.heroes)
            {
                if ($scope.heroes.hasOwnProperty(h))
                {
                    var scopeHero = $scope.heroes[h];
                    if (hero.first === scopeHero.first && hero.last === scopeHero.last) {
                        delete $scope.heroes[h];
                    }
                }
            }
    };



<form name="addVal">
 <input name="newVal" ng-model="newVal" ng-maxlength="5" />
 <button ng-disabled="!newVal" ng-click="add()">add2</button>
 <span ng-show="addVal.newVal.$error.maxlength">Слишком длинно!</span>
</form>

JavaScript

function HeroCtrl ($scope)
{
    $scope.heroes = [{
        first: "Tony",
        last: "Stark",
        imgSrc: "http://toydirt.com/wp-content/uploads/2010/11/Iron-Man-2-Mark-IV-Tony-Stark-Robert_Downey-Jr-Hot-Toys-Figure-24-225x300.jpg"
    },
    {
        first: "Clark",
        last: "Kent",
        imgSrc: "http://www.conscioustimesonline.com/wp-content/uploads/2011/11/clark_kent.jpg"
    },
    {
        first: "Bruce",
        last: "Wayne",
        imgSrc: "http://images2.fanpop.com/image/photos/9000000/Bruce-Wayne-the-dark-knight-9041631-600-817.jpg"
    }];


}

function ACtrl ($scope) {
    var ar = ['one', 'two', 'three'];
$scope.ar = ar;
    $scope.newVal = '';

    $scope.get = function ()
    {
        return ar;
    };
    $scope.add = function ()
    {
        ar.push($scope.newVal);
        $scope.newVal = '';
    }
}