0
<head>
    <script>
    var app = angular.module('myApp', []);
    app.controller('sampleController', function($scope) {
        $scope.items = [{
                name: 'item1'
            },
            {
                name: 'item2'
            },
            {
                name: 'item3'
            },
            {
                name: 'item4'
            }
        ]

    });
    </script>
</head>
<body ng-app="myApp" ng-controller="sampleController">
    <ul ng-repeat='item in items'>
        <li>
            <a href>Show {{item.name}}</a>
        </li>
    </ul>
    <div class="faded overflowed">
        <a>X Close</a>
        <div class="card">
            <h1>{{item.name}}</h1>
            <p>{{sampletext1}}</p>
            <p>{{sampletext2}}</p>
        </div>
    </div>
</body>

Попробовал поискать решение в интернете, но все что находил было немного для других случаев.
Набросал код в упрощенной форме.

Нужно что бы при нажатии на item из item in items, .faded.overflowed(изначально hidden) получал класс(который помимо всего будет его делать visible) и находящиеся внутри .card item.name sampletext1 sampletext2 получали соответствующие значения из array. А при нажатии на зону вне .card весь .faded.overflowed скрывался бы.

Только начал учить AngularJS и хотел бы узнать как подобное принято реализовывать на нем.

1 ответ 1

1

Обычно реализую вот таким способом.

  • Создают переменную, в которой будет хранится текущий выбранный элемент.
  • При нажатии на показ записывают в эту переменную.
  • При закрытии очищаю переменную.

Пример на jsfiddle

angular.module('ExampleApp', [])
  .controller('ExampleController', function() {
    var vm = this;
    vm.currentItem = null;

    vm.sampletext1 = "sampletext1";
    vm.sampletext2 = "sampletext2";

    vm.items = [{
      name: 'item1'
    }, {
      name: 'item2'
    }, {
      name: 'item3'
    }, {
      name: 'item4'
    }]

    vm.showItem = showItem;
    vm.hideItem = hideItem;

    function showItem(item) {
      vm.currentItem = item;
    }

    function hideItem() {
      vm.currentItem = null;
    }
  });
.faded {
  display: none;
}

.showed {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController as vm">
    <ul ng-repeat='item in vm.items'>
      <li>
        <a href ng-click="vm.showItem(item)">Show {{item.name}}</a>
      </li>
    </ul>
    <div ng-class="{'showed':vm.currentItem}" class="faded overflowed">
      <h3>
        Вариант №1. С добавлением класса
      </h3>
      <a ng-click="vm.hideItem()" href>X Close</a>
      <div class="card">
        <h1>{{vm.currentItem.name}}</h1>
        <p>{{vm.sampletext1}}</p>
        <p>{{vm.sampletext2}}</p>
      </div>
    </div>

    <div ng-show="vm.currentItem" class="overflowed">
      <h3>
        Вариант №2. С использованием стандартных директив ng-show или ng-hide
      </h3>
      <a ng-click="vm.hideItem()" href>X Close</a>
      <div class="card">
        <h1>{{vm.currentItem.name}}</h1>
        <p>{{vm.sampletext1}}</p>
        <p>{{vm.sampletext2}}</p>
      </div>
    </div>

    <div ng-if="vm.currentItem" class="overflowed">
      <h3>
        Вариант №3. С использованием стандартной директивы ng-if (наилучший вариант)
      </h3>
      <a ng-click="vm.hideItem()" href>X Close</a>
      <div class="card">
        <h1>{{vm.currentItem.name}}</h1>
        <p>{{vm.sampletext1}}</p>
        <p>{{vm.sampletext2}}</p>
      </div>
    </div>
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.