1
私はAngularで作業しています。私は "繰り返しカスケードテーブル"を作った： 各行が接続されている。行1、列1（R1C1）に何か変更があった場合、その行の他の2つの列がカスケードされます。ディレクティブを使用したAngular ng-repeat（カスケードされたリピートテーブル内）
私は自分の問題を示すために2つの "プランカ"を作成しました。 （NGリピート用）カスタムディレクティブ で
- （http://plnkr.co/edit/J8k74C3AUIAxv6rEKcWL?p=preview）
- 同じですが、指令なし（http://plnkr.co/edit/neOgWfuyuFnkawRGJB0c?p=preview）
例では2、R1C1における "機能" でありますR1C2にはランダムオプションが選択され、R1C3にはカスケードオプションが設定されます。
同じ例では、行が追加され（R2）、R2C1では「department」が選択され、R2C2では他のランダムオプションであるR2C3にカスケードオプションが設定されますが... R1C3も変更されます
私はカスタムディレクティブで作業すると、この問題は解決されます。ただし、各行の削除ボタンは機能しません（$ index ..も同様です）。また、jsonの書式設定されたフォームデータには値が設定されません。どのように私はこれらの2つのプランカの間に完璧なマッチを作ることができますか？私はこの上で私の頭を壊しています:(
PLUNKER CODE（例2）：
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({});
};
$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]);
}
})
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;
}
});
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/[email protected]/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/[email protected]/dist/formly.js"></script>
<!-- This is the latest version of formly bootstrap templates -->
<script src="//npmcdn.com/[email protected]/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">
<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>
</tbody>
</table>
<button class="btn btn-default" id="addMore" aria-hidden="true"
ng-click="addNewForm()">Add</button>
<pre>{{filters | json}}</pre>
</body>
</html>
ありがとうございました！私もあなたの答えをupvoteしようとしましたが、私は新人です（私はそれが記録されているが、公開されていないというメッセージを得る）。 – lhartman
回答をアップアップするには最低15の評判が必要です。 –