Question

你有使用Json数据的树网格我想整合选择功能，因为我找到了这个 - ＆gt; “http://plnkr.co/edit/Rk8y2N7p30VHNancDWnk?p=preview”

但我无法与JSON数据集成。请帮帮我。

我希望这个[http://plnkr.co/edit/rZmdUWE9XYOrOuEcjKjt?p=preview]正常工作，你可以检查并使其可行。

我正在尝试下拉选择，也需要帮助。

但是我没有在Json的UI网格中获得用于选择和多选下拉/下移的任何开源API。请帮忙

'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: 'adam@email.com',      age: 10 },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12 },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30 },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 31 },
    { name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54 },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43 },
    { name: 'Adrian',    email: 'adrian@email.com',    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>

谢谢:)

Answer 1

我认为您需要创建一个指令，请参阅此处的讨论：http://ui-grid.info/docs/#/tutorial/201_editable关于自定义编辑器。

使用ui网格中的JSON数据进行下拉/下拉选择或正常选择？

1 个答案: