JSFiddle - React, Tailwind, and code Playground

by robertjd

HTML

<script src="http://docs-next.angularjs.org/angular-0.10.6.min.js"></script>
<div ng:app ng:controller="MainController">
    <span ng:bind="id"></span>
    <div ng:repeat="lesson in lessons" ng:controller="LessonController">
        <span ng:bind="no_starred"></span>
        <li ng:repeat="word in lesson.words">
            
                <span ng:bind="word.text"></span>
                <span ng:click="word.starred=!word.starred">star</span>
                <span ng:show="word.starred">*</span>
            
        </li>
    </div>
</div>

JavaScript

function MainController() {
    this.id = "test";
    this.lessons = [
        {
            title: "Colors",
            words: [
                {
                    text: "Blue",
                    starred: false
                },
                {
                    text: "red",
                    starred: false
                }
            ]
        },
        {
            title: "Fruits",
            words : [
                {
                    text : "Apple"
                    , starred : false
                },
                {
                    text : "Bananna"
                , starred : false
                }
            ]
        }
    ];

    this.$on('starred',function(event){
        console.log(event.currentScope);
        for(var i=0,m=event.currentScope.lessons.length;i<m;i++){
                console.log(event.currentScope.lessons[i]);
        }
    })

}

function LessonController($filter) {
    this.no_starred = 0;
    this.$watch('lesson.words', function($scope, newval, oldval) {
        $scope.no_starred = $filter('filter')($scope.lesson.words, {
            starred: true
        }).length;
        $scope.$emit('starred');
    });
}