AngularJs: связать пользовательский интерфейс-выбор из Json и таблицы фильтров

Использование AngularJS 1.3.4.

У меня есть html-таблица, которая заполняется из веб-API, где я делаю http-запрос, чтобы получить эти данные и заполнить свою html-таблицу. Мой пример json выглядит следующим образом:

{
    id: 1,
    firstName: "John",
    lastName: "Rein",
    status: 'available'
},
{
    id: 2,
    firstName: "David",
    lastName: "Gumry",
     status: 'not available'
}

Теперь у меня есть раскрывающийся список под таблицей, и я использую для него ui-select. Я хочу заполнить этот раскрывающийся список на основе статуса в моем json. Например, в моем json выше у меня есть 2 статуса доступных и недоступных. Я хочу, чтобы мой раскрывающийся список имел эти значения. После заполнения раскрывающегося списка я хочу отфильтровать свою таблицу на основе выбранного значения раскрывающегося списка. У меня есть раскрывающийся список как:

  <ui-select tagging ng-model="selected" theme="bootstrap">
    <ui-select-match placeholder="Pick one...">{{$select.selected.value}}</ui-select-match>
    <ui-select-choices repeat="val in values | filter: $select.search track by val.value">
        <div ng-bind="val.value | highlight: $select.search"></div>
    </ui-select-choices>        
</ui-select>

Я создал свой jsfiddle по адресу: https://jsfiddle.net/aman1981/wfL1374x/

Я не уверен, как я могу связать результаты json с моим DDL и отфильтровать мою таблицу.


angularjs ui-select
person kaka1234    schedule 18.06.2018    source источник
comment
Ссылка на ваш jsfiddle не работает   -  person jbrown    schedule 18.06.2018
comment
@jbrown Я исправил это.   -  person kaka1234    schedule 18.06.2018

Ответы (1)


arrow_upward
1
arrow_downward

У вас было несколько проблем, которые требовали решения, включая избыточное использование ng-app и ng-controller. Кроме того, кажется, что ui-select лучше всего работает с синтаксисом ControllerAs, который в целом является предпочтительным подходом.

После этих и других изменений (слишком много, чтобы перечислять) вот рабочий код:

angular.module('myApp', ['ui.select'])

  .controller("PeopleCtrl", function($http) {

    var vm = this;

    vm.people = [];
    vm.isLoaded = false;
    vm.values = [];

    vm.loadPeople = function() {
      // *** I had to comment this out as it is not allowed in the SO Code Snippet but is fine for your code
      //$http({
      //  method: 'POST',
      //  url: '/echo/json/',
      //  data: mockDataForThisTest

      //}).then(function(response, status) {
      //  console.log(response.data);
      //  vm.people = response.data;
      //});
      vm.people = [{
          id: 1,
          firstName: "John",
          lastName: "Rein",
          status: 'available'
        },
        {
          id: 2,
          firstName: "David",
          lastName: "Gumry",
          status: 'not available'
        }
      ];

      vm.values = [...new Set(vm.people.map(obj => ({
        value: obj.status
      })))];
    };

    vm.selected = {
      key: null,
      value: null
    };

    var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([{
        id: 1,
        firstName: "John",
        lastName: "Rein",
        status: 'available'
      },
      {
        id: 2,
        firstName: "David",
        lastName: "Gumry",
        status: 'not available'
      }
    ]));
  })
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.css" rel="stylesheet" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.2.23/angular-sanitize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body ng-app="myApp">
  <div ng-controller="PeopleCtrl as ctrl">
    <br>
    <p> Click <a ng-click="ctrl.loadPeople()">here</a> to load data.</p>

    <h2>Data</h2>
    <div class="row-fluid">
      <table class="table table-hover table-striped table-condensed">
        <thead>
          <tr>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="person in ctrl.people | filter: {status: ctrl.selected.value} : true">
            <td>{{person.id}}</td>
            <td>{{person.firstName}}</td>
            <td>{{person.lastName}}</td>
            <td>{{person.status}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <br><br>

    <div width="50px">
      <ui-select tagging ng-model="ctrl.selected" theme="bootstrap">
        <ui-select-match placeholder="Pick one...">{{$select.selected.value}}</ui-select-match>
        <ui-select-choices repeat="val in ctrl.values | filter: $select.search track by val.value">
          <div ng-bind="val.value | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>
    </div>
  </div>
</body>

person jbrown    schedule 18.06.2018
comment
спасибо за это. Я упомянул, что раскрывающийся список должен быть заполнен из самого json, а не из жестко запрограммированных значений. Я создал с жестко закодированными значениями, так как не знаю, как заполнить это из json. Извините, если я был не ясен. - person kaka1234; 19.06.2018
comment
Я не уверен, что еще вы ищете. У вас есть вызов $http для получения данных. Что еще вам нужно? - person jbrown; 19.06.2018
comment
Выбор пользовательского интерфейса привязан к repeat=val в ctrl.values, где значения являются жестко запрограммированным массивом в контроллере. Так как мой json имеет статус как на ключе. Я хочу, чтобы мой раскрывающийся список привязывался к статусу из Json, а не к жестко закодированному массиву значений. Надеюсь теперь ясно - person kaka1234; 19.06.2018
comment
это выполнимо? - person kaka1234; 19.06.2018
comment
Вы спрашиваете, можно ли инициализировать массив значений данными из массива людей? - person jbrown; 19.06.2018
comment
Да. Приведенный выше раскрывающийся список инициализируется из массива значений (это жестко запрограммированные значения доступных и недоступных). Я хочу, чтобы значения раскрывающегося списка зависели от массива People (это json, который я получаю из своего API). Итак, если в моем массиве людей есть 2 значения (доступно и недоступно), в раскрывающемся списке должно отображаться 2 значения. Если он имеет 3 значения (доступен, недоступен и ожидает). Он должен показывать эти значения. И ключ из json/массива для привязки — это статус. - person kaka1234; 19.06.2018
comment
Вы можете просто использовать карту javascript для создания массива значений, например vm.values ​​= [...new Set( vm.people.map(obj =› ({value: obj.status}))) ]; Я обновил свой ответ. - person jbrown; 19.06.2018
comment
Получил это сейчас. Будет реализовано в моем приложении и опубликовать, если возникнут проблемы. Спасибо за помощь. - person kaka1234; 19.06.2018