angularjs - resetting li after ngrepeat

I want to flow different data through a user clickable ul but I can't reset the state of the li's which have the isactive style set. Stripping down to bare minimum to demonstrate the input box takes two numbers separated by '-', the first is the number of clickable boxes, the second is the number of unclickable boxes at the beginning.

Note when new input is sent the li's that are currently active remain active. I want to reset the li's to inactive. [ note: trying to do this without jQuery to learn "The Angular Way". I have a pure jQuery version of this ]. angular.copy has not worked (though that could be ignorance)

I'm starting to think this might have to go but I'm keeping the graphic representation exclusively in the .html:

html

<div ng-controller="BoxScreen">
        <input type="text" ng-model="inbox" />
        <button ng-click="getBox()" /></button>
        <div>
            <br />
            <h2>{{dys}}, {{dst}}</h2>
            <div>
                <ul class="smallbox">
                    <li data-ng-repeat="s in skip">&nbsp;</li>
                    <li data-ng-repeat="d in ar" ng-class="{'button': !isActive, 'button active': isActive}" ng-init="isActive = false" ng-click="isActive = !isActive; clickMe(d)">{{d}}</li>
                </ul>
            </div>
        </div>
    </div>

javascript

angular.module('myApp', [])
    .controller('BoxScreen', ['$scope', function($scope) {
        $scope.getBox = function() {
            indat = $scope.inbox.split('-');    
            $scope.dys = indat[0];
            $scope.dst = indat[1];
            $scope.ar = [];
            $scope.skip = [];           
            for(var s=0; s < $scope.dst; s++) {
                $scope.skip.push(s);
            }
            for(var d=1; d <= $scope.dys; d++) {
                $scope.ar.push(d);
            }
        }
        $scope.clickMe = function(did) {
            //
        }
}]);

Answers


I believe your problem is related to ng-repeat creating new child scopes for the child elements it attaches to the DOM. When you expand the list with new elements, ng-repeat doesn't actually destroy the old elements (as long as they're unchanged, as is true in your case), but reuse them. See more here.

The way you have designed your structures on the scope seems very messy to me. A better approach is to create all the data beforehand, and not introduce all the logic in the HTML.

Example:

<li data-ng-repeat="d in ar.items" ng-class="{'button': !d.isActive, 'button active': d.isActive}" ng-click="ar.toggle(d)">{{d.text}}</li>

where ar here is an object:

$scope.ar = {
    items: [
        {
            text: '1',
            isActive: false
        },
        more items...
    ],
    toggle: function(d) {
        d.isActive = !d.isActive;
    }
}

This way you have access to the data in other places as well, and not some hidden away variables set on the child scope.


Need Your Help

how to convert a JavaScript literal object into Json object in PHP

javascript php json converter object-literal

I have a JS literal object string such as {name:{first:"George",middle:"William"},surname:"Washington"} and I have to convert it in Json. How can I do it using PHP?

Drupal 6 Validation for Form Callback Function

php validation drupal forms drupal-fapi

I have a simple form with a select menu on the node display page. Is there an easy way to validate the form in my callback function? By validation I don't mean anything advanced, just to check that...