在付出了很多努力使事情正常运行之后，我终于明白我得到了我想要的东西，除了最后一件东西。
在角度形式的控制器，服务和指令中。我不知道如何访问scope.filters中的变量。
我在这里创建了一个塞子：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
<!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}}</pre>
</body>
</html>
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>