Получить индекс элемента в ng-repeat с директивой и пользовательским шаблоном - PullRequest
Новая
       13

Получить индекс элемента в ng-repeat с директивой и пользовательским шаблоном

0 голосов
/ 23 января 2019

После того, как я приложил много усилий, чтобы все заработало, я, наконец, дошел до того, что я получаю то, что хочу, за исключением 1 финальной вещи.

Внутри углового контроллера, сервиса и директивы. Я не знаю, как получить доступ к переменным в области видимости.

Я создал плункер здесь: http://plnkr.co/edit/J8k74C3AUIAxv6rEKcWL?p=preview То, что я хочу, чтобы получить фильтры, которые будут обновлены в HTML div: 

{{filters | json}}

Также я не знаю, как заставить кнопку удаления работать для каждой строки.

Надеюсь, вы, ребята, знаете достаточно, чтобы помочь мне.

script.js 

'use strict';
/* global $ */

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout, filterService) {
  $scope.filters = filterService.getFilters();

      $scope.addNewForm = function (){
        $scope.filters.push({});
      };

})

app.directive("filter", function(filterService) {
  return {
    templateUrl: "loadTableData.html",
    replace: true,
    scope: {
      filter: '='
    },
    link: function($scope) {
      $scope.attribute = filterService.getAttribute();
      $scope.comparison = function(index, field) {
        $scope.comparisonType = filterService.getComparison($scope.attribute[field]);
      };
      $scope.value = function(index, parent, field) {
        $scope.vType = filterService.getValueType($scope.attribute[parent], $scope.comparisonType[field]);
      }
      $scope.removeForm = function (formIndex) {
        console.log('test: ' + formIndex);
        var formIndex = $scope.filters.indexOf(formToRemove);
        if (formIndex > -1) {
          $scope.forms.splice(formIndex, 1);
        }
      };

    }
  }
});


app.service('filterService', function() {

  var attribute = [
    {name: 'Building year', type: 'integer', id: 1},
    {name: 'Square meters', type: 'integer', id: 2},
    {name: 'Function', type: 'select', id: 3},
    {name: 'Department', type: 'multiselect', id: 4},
    {name: 'Date of possesion', type: 'date', id: 5},
  ];

  this.getFilters = function() {
    return [];
  }

  this.getAttribute = function() {
    return attribute;
  }

  this.getComparison = function(attribute) {
    console.log(attribute.name)
     var comparisonType = [];
    if (attribute.type == 'select' || attribute.type == 'multiselect') {
      comparisonType = [
        {name: 'is', id: 1},
        {name: 'is not', id: 2},
        {name: 'one of', id: 3},
        {name: 'not one of', id: 4},
      ]
    } else if (attribute.type == 'integer' || attribute.type == 'date') {
      comparisonType = [
        {name: 'is', id: 1},
        {name: 'is not', id: 2},
        {name: 'greater then', id: 3},
        {name: 'smaller then', id: 4},
      ]

    }
    return comparisonType;
  }

  this.getValueType = function(attribute, comparison) {
    console.log(attribute.name)
    console.log(comparison.name)
    var vType = [];
    var vTypes = [
        {name: 'Department 1', id: 1, fk: 4},
        {name: 'Department 2', id: 2, fk: 4},
        {name: 'Department 3', id: 3, fk: 4},
        {name: 'Department 4', id: 4, fk: 4},
        {name: 'Department 5', id: 5, fk: 4},
        {name: 'Function 1', id: 6, fk: 3},
        {name: 'Function 2', id: 7, fk: 3},
        {name: 'Function 3', id: 8, fk: 3},
        {name: 'Function 4', id: 9, fk: 3},
        {name: 'Function 5', id: 10, fk: 3},
      ]
    var tmp = [];

    angular.forEach(vTypes, function(value, key) {
      if (value.fk === attribute.id)
        tmp.push(value);
    });


    if (attribute.type == 'select') {
      vType = [
        {name: 'Department 1', id: 1, fk: 4},
        {name: 'Department 2', id: 2, fk: 4},
        {name: 'Department 3', id: 3, fk: 4},
        {name: 'Department 4', id: 4, fk: 4},
        {name: 'Department 5', id: 5, fk: 4},
        {name: 'Function 1', id: 6, fk: 3},
        {name: 'Function 2', id: 7, fk: 3},
        {name: 'Function 3', id: 8, fk: 3},
        {name: 'Function 4', id: 9, fk: 3},
        {name: 'Function 5', id: 10, fk: 3},
      ];
    }
    //return vType;
    return tmp;
  }
});

index.html 

<code><!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <!-- Twitter bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

    <!-- apiCheck is used by formly to validate its api -->
    <script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
    <!-- This is the latest version of angular (at the time this template was created) -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>

    <!-- This is the latest version of formly core. -->
    <script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
    <!-- This is the latest version of formly bootstrap templates -->
    <script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl">

      <table class="table table-bordered" cellspacing="0" width="100%">

        <th>Attribute</th>
        <th>Compare</th>
        <th>Value</th>
        <th></th>

        <tbody>
          <tr data-ng-repeat="item in filters" class="text-center" filter="item">

            </tr>
        </tbody>
      </table>

      <button class="btn btn-default" id="addMore" aria-hidden="true" 
      ng-click="addNewForm()">Add</button>
      <pre>{{filters | json}}

loadTableData.html 


<tr>
  <td>
    <select class="form-control" 
    ng-options='k as v.name for (k,v) in attribute' 
    ng-change='comparison($index, item.check1)' 
    ng-model='item.check1'>
      <option value='' disabled>Select...</option>
    </select>
  </td>
  <td>
    <select ng-if="item.check1" class="form-control" 
    ng-model='item.check2' 
    ng-options='a as b.name for (a,b) in comparisonType' 
    ng-change='value($index, item.check1, item.check2)'>
      <option value='' disabled>Select...</option>
    </select>
  </td>
  <td>

    <!--DATE-->
    <input class="form-control" ng-if="item.check1==='4' && item.check2"
    type="date" ng-model='item.check3'>
    </input>

    <!--INTEGER-->
    <input ng-if="item.check1==='0' && item.check2" 
    class="form-control" ng-model='item.check3' type="number" 
    </input>

    <!--SELECT-->
    <select ng-if="item.check1==='2' && item.check2" 
    class="form-control" ng-model='item.check3' 
    ng-options='c as d.name for (c,d) in vType'>
      <option value='' disabled>Select...</option>
    </select>

    <!--MULTIPLE-->
    <select multiple ng-if="item.check1==='3'" 
    class="form-control" ng-model='item.check3' 
    ng-options='c as d.name for (c,d) in vType'>
    </select>

  </td>
  <td>
    <button data-index="$index" type="button" 
    class="btn btn-sm btn-danger" 
        ng-click="filters.splice($index, 1)" >
      Remove
    </button>
  </td>
</tr>
...