Как получить индекс выбранного, нажмите значок в angularjs - PullRequest
Новая
       1

Как получить индекс выбранного, нажмите значок в angularjs

0 голосов
/ 22 апреля 2019

У меня есть набор данных JSON,

НЕОБХОДИМОСТЬ :

1) Я взял все данные из JSON, используя ng-repeat

2) У меня есть 3 кнопки, если я нажимаю любую из кнопок, все значения 3 json исчезают.

3) Я хочу передать в качестве аргумента только значение информации о нажатой кнопке в ng-click.

4) Как узнать, какая кнопка была нажата и как передать значение {{task.info}} в конкретный контент.

5) Если я выберу id = "2", я хочу передать только те вторые значения идентификатора в вызове функции ng-click (т.е. ng-click = "getDetails (task.info)"). 

var tasks = [{
id : 1,
name : 'jhonny',
point : 25,
info:'<div><ul>
          <li><a href="#tab-1"> Tab 1 </a></li>
          <li><a href="#tab-2"> Tab 2 </a></li>
          <li><a href="#tab-3"> Tab3 </a></li>
        </ul>
        </div>',
},
{
id : 2,
name : 'mani',
point : 25,
info:'<div><ul>
          <li><a href="#tab-1"> Tab 1 </a></li>
          <li><a href="#tab-2"> Tab 2 </a></li>
          <li><a href="#tab-3"> Tab3 </a></li>
        </ul>
        </div>',
},
{
id : 1,
name : 'kumar',
point : 65
info:'<div><ul>
          <li><a href="#tab-1"> Tab 1 </a></li>
          <li><a href="#tab-2"> Tab 2 </a></li>
          <li><a href="#tab-3"> Tab3 </a></li>
        </ul>
        </div>',
},

Здесь я хочу передать значение info в функцию ng-click. Но как я могу узнать, какая информация была нажата. 

<li ng-repeat='task in tasks'>
  <button ng-click="testTask(task.name)"></button>
</li>

Ответы [ 2 ]

1 голос
/ 22 апреля 2019

Вы можете использовать переменную $index из ngRepeat doc:

Директива ngRepeat создает шаблон один раз для каждого элемента из коллекции.Каждый экземпляр шаблона получает свою собственную область, где заданная переменная цикла установлена ​​на текущий элемент коллекции, а $ index установлена ​​на индекс элемента или ключ.

, поэтому выможно сделать: 

<li ng-repeat='task in tasks'>
  <button ng-click="testTask($index, task.name)"></button>
</li>

Демо : 

angular.module("myApp", [])
.controller('myCtrl', function($scope) {

$scope.tasks = [{
id : 1,
name : 'jhonny',
point : 25,
info:'<div><ul><li><a href="#tab-1"> Tab 1 </a></li><li><a href="#tab-2"> Tab 2 </a></li><li><a href="#tab-3"> Tab3 </a></li></ul></div>'
},
{
id : 2,
name : 'mani',
point : 25,
info:'<div><ul><li><a href="#tab-1"> Tab 1 </a></li><li><a href="#tab-2"> Tab 2 </a></li><li><a href="#tab-3"> Tab3 </a></li></ul></div>'
},
{
id : 1,
name : 'kumar',
point : 65,
info:'<div><ul><li><a href="#tab-1"> Tab 1 </a></li><li><a href="#tab-2"> Tab 2 </a></li><li><a href="#tab-3"> Tab3 </a></li></ul></div>',
}];

  $scope.testTask = (index, name) => {
     console.log('index: ', index);
     console.log('name: ', name); 
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
 <div ng-controller="myCtrl">
   <li ng-repeat='task in tasks'>
     <button ng-click="testTask($index, task.name)">{{task.name}}</button>
   </li>
 </div>

</div>
1 голос
/ 22 апреля 2019

Проверьте рабочий пример здесь: https://next.plnkr.co/edit/waKLtfdQyGaY8N5Q

Вы можете передать весь объект задачи, тогда для вашей функции будут доступны имя и информация: 

<li ng-repeat='task in tasks'>
  <button ng-click="testTask(task)">{{task.name}}</button>
</li>

Затем в функции testTask вы можете получить доступ к task.name и task.info для выбранного элемента.

HTML 

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl">
      <h1>Hello {{name}}</h1>
      <p>Start editing and see your changes reflected here!</p>
      <ul>
        <li ng-repeat='task in tasks'>
          <button ng-click="testTask(task)">{{task.name}}</button>
        </li>
      </ul>
    </div>
  </body>
</html>

script.js 

import angular from 'angular';

angular.module('plunker', []).controller('MainCtrl', function($scope) {
  $scope.name = 'Plunker';
  $scope.tasks = [
    {
    id : 1,
    name : 'jhonny',
    point : 25,
    info:`<div><ul>
              <li><a href="#tab-1"> Tab 1 </a></li>
              <li><a href="#tab-2"> Tab 2 </a></li>
              <li><a href="#tab-3"> Tab3 </a></li>
            </ul>
            </div>`
    },
    {
    id : 2,
    name : 'mani',
    point : 25,
    info:`<div><ul>
              <li><a href="#tab-1"> Tab 1 </a></li>
              <li><a href="#tab-2"> Tab 2 </a></li>
              <li><a href="#tab-3"> Tab3 </a></li>
            </ul>
            </div>`
    },
    {
    id : 1,
    name : 'kumar',
    point : 65,
    info: `<div><ul>
              <li><a href="#tab-1"> Tab 1 </a></li>
              <li><a href="#tab-2"> Tab 2 </a></li>
              <li><a href="#tab-3"> Tab3 </a></li>
            </ul>
            </div>`
    }
  ];
  $scope.testTask = function(task) {
    console.log(task);
    window.alert(task.id + ' ' + task.name);
  }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...