T
T
tty62014-08-14 15:37:12
JavaScript
tty6, 2014-08-14 15:37:12

How to make angularjs ng-click work?

I can't figure out why clicking on list items doesn't work. Below is the code:
index.html

<div class="container" ng-app="keys">
  <ul ng-controller="KeysController">
    <li ng-repeat="key in keys" >
      <button ng-click="open(key) ">{{key.content}}</button>
    </li>
    <hr>
    <ng-switch on="anyItemOpened()">
        <div ng-switch-when="true">
          <div>
            {{opened.name}} 
          </div>
          <a ng-click="close()">close</a>
        </div>
    </ng-switch>
  </ul>
</div>

app.js
(function(){
    var app = angular.module('keys',[]);

    app.controller('KeysController',function($scope){

        $scope.opened = undefined;
        $scope.open = function(key){
            if(this.isOpen(key)){
                this.opened = undefined;
            } else {
                this.opened = key;
            }
        };

        $scope.isOpen = function(key){
            return this.opened === key;
        };

        $scope.anyItemOpened = function(){
            return this.opened !== undefined;
        };

        $scope.close = function(){
            this.opened = undefined;
        };


        $scope.keys = [
            {name: 'item1', content: 'content1'},
            {name: 'item2', content: 'content2'},
            {name: 'item3', content: 'content3'}
        ]

    });

    app.controller('KeyController', function(){

    });
})();

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexander David, 2014-08-14
@tty6

and there does not give an error like the controller is not found and all that?
(function(){})(); try to remove it

_
_ _, 2014-08-14
@AMar4enko

Try to get rid of the switch first, it is not needed.

<div ng-if="opened">
  <div>
    {{opened.name}} 
  </div>
  <a ng-click="close()">close</a>       
</div>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question