current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

I am new to Angular.js and what I'm trying to do is adding a lis-item every time the user clicks on #create-new-rule but the below doesn't seem to be working.

Also, when the user click on li .delete I want that list-item to be removed from the DOM as well as from the this.rules array.

app.js

app.controller('RuleController', function()
{
    function Rule ()
    {
        this.name = 'untitled';

        this.delete  = function ()
        {
            console.log('removed from DOM as well as from this.rules array');
        };
    };

    this.rules = [];

    this.addRule = function () 
    {
       this.rules.push(new Rule());
    };
});

index.html

<div id="rule-controller" ng-controller="RuleController as RuleCtrl">

  <ul id="rules">

    <li class="rule" ng-repeat="rule in RuleCtrl.rules">

         <input type="text" ng-value="rule.name"/>    
         <div class="delete" ng-click="rule.delete()">delete</div>

    </li>

  </ul>

  <div id="create-new-rule">
    <div ng-click="RuleCtrl.add()">create new rule</div>
  </div>

</div>
share|improve this question
up vote 1 down vote accepted

Your method for adding is called addRule() but from the view you are calling add(). Try changing that. Furthermore, to remove you can use splice, but you would need to get a reference to this outside of the Rule function in order to access the array.

E.g.index.html:

<div ng-click="RuleCtrl.addRule()">create new rule</div>

Controller:

var app = angular.module('myApp', []);
app.controller('RuleController', function()
{
    var self = this;
    function Rule ()
    {
        this.name = 'untitled';

        this.delete  = function ()
        {
           var index = self.rules.indexOf(this);
           self.rules.splice(index,1);
        };
    };

    this.rules = [new Rule()];

    this.addRule = function () 
    {
       this.rules.push(new Rule());
    };


});
share|improve this answer
    
Thanks, that worked great. Also, I realised I was messing up my references with so many this.. I see you're using self which is great but I've also seen this syntax : ..."someController", function ($scope) {$scope.rules = []; ....etc.}); Is this $scope parameter the same as using this as a reference to the controller itself ? – Sprout Coder 20 hours ago
    
Reinard is using controllerAs syntax instead of $scope. That's the proper way of doing it nowadays. I know it's confusing because there's so many people still using $scope in their bolg posts and tutorials. (They're old.) toddmotto.com/digging-into-angulars-controller-as-syntax – Gabriel Kunkel 20 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.