Выбор UL> LI элемента, который заполняется с помощью ng-repeat из javascript

0

У меня есть элементы UL> LI, заполненные угловым ng-repeat. Я хочу выбрать один из этих LI одним нажатием кнопки, которая находится за пределами ng-repeat. Как я могу достичь этого?

Ниже приведен пример кода.

Список LI

<ul ng-controller="ConstantsController as ctrl" >
 <li ng-repeat="sectionType in sectionTypes">{{sectionType.description}}</li>
</ul>

Кнопка - при щелчке по этой кнопке необходимо выбрать конкретный LI.

<button class="btn btn-primary btn-xs"></button>

Пример:

Рассмотрим пример LI, имеющих значения A, B и C, заполненные через ng-repeat и щелкнув по кнопке, я хочу выбрать B.

  • 0
    comments к объекту относятся к объекту sectionType ?
  • 0
    Хорошо. Я должен был быть более ясным. Список находится в разделе страницы, который используется для добавления записи в базу данных. При добавлении добавленные записи будут отображаться в таблице под этим разделом. И кнопка редактирования есть в каждой строке таблицы. При нажатии этой кнопки редактирования ее данные должны быть заполнены в разделе, где присутствует список. Надеюсь, это понятно. Раздел - это элемент списка, а комментарий - строка таблицы, которая содержит раздел списка.
Показать ещё 7 комментариев
Теги:
html-lists

3 ответа

-1
Лучший ответ

ОК. Прочитав немного jQuery API, я нашел следующее решение более подходящим.

Поручаю идентификатор в UL, а затем в JavaScript Я использую JQuery содержит функцию, чтобы найти текст LI и изменить свой класс выбраны соответствующим образом.

Ниже приведен код HTML/JSP.

<ul ng-controller="ConstantsController as ctrl" id="section-type-list">
                                        <li ng-repeat="sectionType in sectionTypes" ng-click="setSection(sectionType.id, sectionType.description)">{{sectionType.description}}</li>
                                    </ul>

Ниже приведен Javascript

$("#section-type-list li:contains('" + value + "')").addClass('selected');

Спасибо всем за вашу поддержку.

Поделиться
  • 0
    Не используйте jquery для такой операции в angular .
  • 0
    Хорошо. Я попробую ваше решение.
1

Вы можете сделать это, я дал образец, так как вы не предоставили код,

При щелчке примените стиль,

В HTML:

<ul ng-repeat="vote in votes" ng-click="editComment(vote.id)" ng-class="{selected : vote.id === idSelectedVote}">

В контроллере:

$scope.idSelectedVote = null;
$scope.editComment = function(idSelectedVote) {
   $scope.idSelectedVote = idSelectedVote;
   console.log(idSelectedVote);
}

DEMO APP

Поделиться
  • 0
    Пожалуйста, обратитесь мой комментарий выше для большей ясности.
0

Вы можете использовать директиву ng-class с опцией isSelected в элементе массива sectionTypes.

Живой пример на jsfiddle.

angular.module('ExampleApp', [])
  .controller('ExampleController', function() {
    var vm = this;
    vm.sectionTypes = [{
      description: "A",
      id: 1,
      isSelected: false
    }, {
      description: "B",
      id: 2,
      isSelected: false
    }, {
      description: "C",
      id: 3,
      isSelected: false
    }];
    vm.setSelected = function(id) {
      //Find particular element in vm.sectionTypes by id
      angular.forEach(vm.sectionTypes, function(item) {
        if (item.id === id)
          item.isSelected = !item.isSelected;
      });
    };
  });
.selected {
  color: red;
  font-style: italic;
}
<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>
      <li ng-class="{selected:sectionType.isSelected}" ng-repeat="sectionType in vm.sectionTypes">{{sectionType.description}}</li>
    </ul>
    <button ng-click="vm.setSelected(2)">
      set B Selected
    </button>
    <hr>
    <select ng-model="selectedSection" ng-options="sect as sect.description for sect in vm.sectionTypes">
    </select>
    <button ng-disabled="!selectedSection" ng-click="vm.setSelected(selectedSection.id)">
      set selected by select
    </button>
  </div>
</div>
Поделиться
  • 0
    Я изменил UL на SELECT. Теперь у меня есть модель, связанная с этим. У меня есть список, который заполняется из констант контроллера. Наряду с другими деталями, я нажимаю добавить, чтобы добавить все эти детали в БД. В нижней части моей страницы есть таблица, в которой отображаются добавленные записи. В каждой строке этой таблицы есть кнопка редактирования. При нажатии на эту кнопку, я хочу, чтобы добавленная опция была выбрана в моем раскрывающемся списке. Я думал, что привязки добавленного объекта опции к модели будет достаточно, однако это не работает. В ходе расследования я обнаружил, что хэш-ключ выпадающих опций и один из добавленных элементов - это разница. Как я могу это исправить?
  • 0
    Это новый вопрос. Вам нужно создать новый вопрос с подробным объяснением и примером кода.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню