Geek Answers Handbook

Ng-click inside ng-repeat doesn't work: focus and display

Noob web developer is here.

I want to know why this violin is not working. When you click the link in the drop-down menu, I expect a warning to appear, but it is not. A button labeled "yell" gives the desired behavior, but it is not a drop-down element.

Javascript

function apiCtrl($scope) {

    $scope.fish = [
        'blum',
        'blum',
        'shub'
    ];

    $scope.yell = function() {
        alert("HEY");
    };
}

HTML

<div ng-controller="apiCtrl">
    <button ng-click='yell()'>yell</button>
    <br>
    <input class='autocompleted' type='text'/>
    <ul>
        <li ng-repeat='f in fish' tabIndex='-1'>
            <a ng-click="$parent.yell()"> {{f}}
            </a>
        </li>
    </ul>
</div>

CSS

input.autocompleted + ul {
  display: none;
}

input.autocompleted:focus + ul {
  padding: 2px;
  margin: 1px;
  list-style-type: none;
  display: block;
  position: absolute;
  z-index: 2;
  background-color: #FFF;
  border: 1px solid #000;
}

I was looking for several solutions, and although there are quite a few, none of them contain the added riddle of inexperienced css mixed. StackOverflow will not allow me more than two links in a single post, so here is one of the solutions I was looking at.

As you can see, I used $ parent to avoid including the ngRepeat directive.

$rootScope yell(), . .

CSS , , Angular?

+4
1

, mousedown mouseup . , mousedown, css input.autocompleted + ul{display: none;} , , mouseup , click . , <a ng-click="yell()"> <a ng-mousedown="yell()">, . , . , , .

Fiddle

module.controller('controllerName', constructorWithDep), (, ) 1.3.

, $parent , . , . , yell - , , .

+3

More articles:


All Articles