Выпадающий выбор или обычный выбор с данными JSON в сетке пользовательского интерфейса?

0

Привет, у меня есть сетка деревьев с данными Json. Я хочу интегрировать функцию выделения, которую я нашел this-> " http://plnkr.co/edit/Rk8y2N7p30VHNancDWnk?p=preview "

Но я не могу интегрироваться с данными JSON. Пожалуйста, помогите мне.

Я хочу, чтобы это [ http://plnkr.co/edit/rZmdUWE9XYOrOuEcjKjt?p=preview] работало, может проверить и сделать его работоспособным.

И я пытаюсь отбросить выбор, нужна помощь и для этого.

но я не получаю никакого API-интерфейса с открытым исходным кодом для выбора и мультивыбора drop/down в сетке пользовательского интерфейса с Json. Помощь plz

'use strict';

angular.module('myFilters', []).filter('nameFilter', function(){
  return function(people, selected) {
    var filtered = [];
    if(selected.length > 0){
      for(var i = 0; i < people.length; i++) {
        var person = people[i];
        for(var z = 0; z < selected.length; z++ ) {
          if(selected[z].name == person.name) {
            filtered.push(people[i]);
          } 
        }
      }
    } else {
      filtered = people;
    }
    return filtered;
  };
});

var app = angular.module('demo', ['ngSanitize', 'ui.select', 'ui.grid', 'myFilters']);

app.controller('DemoCtrl', function($scope, $http, $filter) {
  
  $scope.person = {};

  $scope.people = [
    { name: 'Adam',      email: '[email protected]',      age: 10 },
    { name: 'Amalie',    email: '[email protected]',    age: 12 },
    { name: 'Wladimir',  email: '[email protected]',  age: 30 },
    { name: 'Samantha',  email: '[email protected]',  age: 31 },
    { name: 'Estefanía', email: 'estefaní[email protected]', age: 16 },
    { name: 'Natasha',   email: '[email protected]',   age: 54 },
    { name: 'Nicole',    email: '[email protected]',    age: 43 },
    { name: 'Adrian',    email: '[email protected]',    age: 21 }
  ];
  
  $scope.personName = {};
  $scope.personName.selected = [];
  
  $scope.personEmail = {};
  $scope.personEmail.selected = [];
  
  $scope.gridOptions = {
    data: $filter('nameFilter')($scope.people, $scope.personName.selected),
	  enableFiltering: true
  };

  $scope.refreshData = function() {
    $scope.gridOptions.data = $filter('nameFilter')($scope.people, $scope.personName.selected);
  };


});
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
  <meta charset="utf-8">
  <title>AngularJS ui-select</title>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-sanitize.js"></script>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">


  <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css" />

  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.9.0/select.js"></script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.9.0/select.css">

  <script src="demo.js"></script>

</head>

<body ng-controller="DemoCtrl">
    <hr>
<div>
   <ui-select multiple ng-model="personName.selected" ng-change="refreshData()" theme="bootstrap">
            <ui-select-match placeholder="Select or search a person in the list...">{{$item.name}}</ui-select-match>
            <ui-select-choices repeat="person in people | filter: $select.search">
                 <div ng-bind-html="person.name | highlight: $select.search"></div>
            </ui-select-choices>
          </ui-select>
        </div>     
<div>
   <ui-select multiple ng-model="personEmail.selected" theme="bootstrap">
            <ui-select-match placeholder="Select or search a person in the list...">{{$item.email}}</ui-select-match>
            <ui-select-choices repeat="person in people | filter: $select.search">
                                 <small ng-bind-html="person.email | highlight: $select.search"></small>	
            </ui-select-choices>
          </ui-select>
        </div>            
  
  <hr>
<div class="grid" ui-grid="gridOptions"></div>

</body>
</html>

благодаря :)

  • 0
    Используйте директиву ng-options углового js. см. этот вопрос: stackoverflow.com/questions/15688313/…
  • 0
    спасибо, прасад, но я нахожу трудности в интеграции моей сетки дерева с select :(
Теги:
angular-ui-grid
ui-select2

1 ответ

0

Я думаю, вам нужно создать директиву. Обратитесь к обсуждению здесь: http://ui-grid.info/docs/#/tutorial/201_editable о пользовательских редакторах.

Поделиться
  • 0
    Нет, мой запрос заключается в добавлении выбора в сетку пользовательского интерфейса. в вышеуказанной программе это сделано правильно. Но я хочу то же самое с данными JSON.
  • 0
    plnkr.co/edit/rZmdUWE9XYOrOuEcjKjt?p=preview проверьте это и сделайте его работоспособным. это именно то, что я хочу. здесь это не фильтрация данных

Ещё вопросы

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