Как скрыть/показать блок в ng-repeat?

Question

[Николай]

Здравствуйте! Имеем примитивную структуру:
html:

<ol id="list_2" class="list_2" ui-sortable="SortCtrl.list2Options" ng-model="SortCtrl.list2">
    <li ng-repeat="app in SortCtrl.list2" <!--если вставить сюда ng-click, PHPStorm ругается что он "not allowed here" -->> {{ app.name }} </li>
</ol>

<ol ng-model="SortCtrl.list2">
    <li class="list-type-option" ng-repeat="app in SortCtrl.list2">
        <input type="text" ng-model="app.name"> <input type="text" ng-model="app.type">
    </li>
</ol>

js:

(function () {
    angular
        .module('testSortable', [])
        .controller('TestSortableController', function () {
            this.list2 = [
                { name: "another name", type: "input" },
                { name: "another second name", type: "result" }
            ];
        });

})();

Не могу понять как организовать скрытие/показ блоков (li) второго списка при клике на первом (li)

P.S.

Answer 1

[Александр Коротаев]

Как-то так, a можно на button заменить, php-storm ругается видно из-за семантики

<ol id="list_2" class="list_2" ui-sortable="SortCtrl.list2Options" ng-model="SortCtrl.list2">
    <li ng-repeat="app in SortCtrl.list2"> 
       <a ng-click="app.visible = !app.visible">{{ app.name }}</a> 
    </li>
</ol>

<ol ng-model="SortCtrl.list2">
    <li class="list-type-option" ng-repeat="app in SortCtrl.list2" ng-show="app.visible">
        <input type="text" ng-model="app.name"> <input type="text" ng-model="app.type">
    </li>
</ol>

(function () {
    angular
        .module('testSortable', [])
        .controller('TestSortableController', function () {
            this.list2 = [
                { name: "another name", type: "input", visible: true },
                { name: "another second name", type: "result", visible: true }
            ];
        });

})();

Comments

[Николай]

Вроде оно! А может ещё подскажите, как скрывать все предыдущие "показанные"? ) Буду очень благодарен!

[Александр Коротаев]

Николай: предыдущие по списку или по порядку как они были снова отображены?

[Николай]

lekzd: Что бы показывал только последний кликнутый элемент :)

[Александр Коротаев]

Николай: как-то так

<ol id="list_2" class="list_2" ui-sortable="SortCtrl.list2Options" ng-model="SortCtrl.list2">
    <li ng-repeat="app in SortCtrl.list2"> 
       <a ng-click="activeItem = app">{{ app.name }}</a> 
    </li>
</ol>

<ol ng-model="SortCtrl.list2" ng-if="!activeItem">
    <li class="list-type-option" ng-repeat="app in SortCtrl.list2">
        <input type="text" ng-model="app.name"> <input type="text" ng-model="app.type">
    </li>
</ol>
<li class="list-type-option" ng-if="activeItem">
        <input type="text" ng-model="activeItem.name"> <input type="text" ng-model="activeItem.type">
    </li>

(function () {
    angular
        .module('testSortable', [])
        .controller('TestSortableController', function () {
            this.list2 = [
                { name: "another name", type: "input" },
                { name: "another second name", type: "result" }
            ];
           this.activeItem = null;
        });

})();

[Николай]

lekzd: что-то не работает(

[Александр Коротаев]

Николай: ну не могу я сейчас поправить, вы же как-то написали ng-repeat сами, думаю тут тоже справитесь=)

[Александр Коротаев]

lekzd: https://jsfiddle.net/vhg26y1f/ всего-то переменную неверно адресовал в шаблоне

[Николай]

lekzd: спасибо )