angularjs：什么是做一个三标准选择的最佳方式，规定的标准是连在一起的？ [英] angularjs: what's the best way to make a 3-criteria selection, provided the criteria are linked together?
问题描述
我有这个数据结构连接3个标准：
阶段[stageid] - ＆GT;器官[organid] - GT;症状[symptomid]
随着种联接为如下：
阶段[stageid]包含可能的有机而器官[organid]包含可能出现的症状。
我想创建由3选择其使得用户能够选择他想要观察的HTML表单
我目前的执行情况（我不是球迷）是基于过滤器，并有一个缺陷：我是不能够preSELECT默认值挑当用户选择了挂钩的新价值选择。
下面是我的code，以供参考：
＆LT;形式为GT;
＆LT;表＆gt;
＆LT;＆TBODY GT;
＆所述; TR＆GT;
＆LT; TD风格=WIDTH：40％＆GT;
体育场和LT; BR＆GT;
德拉普兰特＆LT; BR＆GT;
＆LT;选择
NG-选项=S作为s.displayName对于s分阶段
NG-模式=search.accident.stage＆GT;
＆LT; /选择＆GT;
＆LT; / TD＆GT;
＆LT; TD风格=WIDTH：20％＆GT;
Organe＆LT; BR＆GT;
concerné＆LT; BR＆GT;
＆LT;选择
NG-选项=O作为o.displayName邻器官|过滤器：accidentsSearch（search.accident.stage，NULL，NULL，accidentsDiagnosticsMenu）
NG-模式=search.accident.organ＆GT;
＆LT; /选择＆GT;
＆LT; / TD＆GT;
＆所述; TD＆GT;
Symptôme＆LT; BR＆GT;
观察＆LT; BR＆GT;
＆LT;选择
NG-选项=S作为s.displayName对于s症状|过滤器：accidentsSearch（search.accident.stage，search.accident.organ，空，accidentsDiagnosticsMenu）
NG-模式=search.accident.symptom＆GT;
＆LT; /选择＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; /表及GT;
添加过滤器code：
$ scope.accidentsSearch =功能（阶段，器官，症状，accidentsDiagnosticsMenu）{
的console.log（------＆GT;＆GT;过滤器过滤器官的标准：+ stage.id +，+（器官organ.id：空）+，+（症状？ symptom.id:\"null））; 如果（器官== NULL和放大器;＆安培;症状== NULL）{
的console.log（------过滤器过滤器官标准级：+ stage.displayName +，+器官+，+症状）;
复位功能（organToCheck）{
如果（accidentsDiagnosticsMenu！）返回false; //尚未prepared VAR保持= accidentsDiagnosticsMenu [stage.id] [organToCheck.id];
//console.log(\"Exploring修剪带+ stage.displayName +：+ JSON.stringify（修剪））;
如果（保持）{
//console.log(\"Checking机关+ O +==+ organToCheck +舞台+ stage.displayName +，所以保持=+保持）;
返回true;
} 返回false;
};
}
其他
如果（症状== NULL）{
//console.log(\"------>filter为标准级/器官：+ stage.displayName +，+ organ.displayName +，+症状）;
复位功能（symptomToCheck）{
如果（accidentsDiagnosticsMenu！）返回false; //尚未prepared VAR保持= accidentsDiagnosticsMenu [stage.id] [organ.id] [symptomToCheck.id];
//console.log(\"----探索修剪带+ stage.id +，+ organ.id +：+ JSON.stringify（accidentsDiagnosticsMenu [stage.id] [organ.id]））;
如果（保持）{
//console.log(\"Checking症状+ symptomToCheck.id +舞台+ stage.id +器官+ organ.id +，所以要=+保持）;
返回true;
} 返回false;
};
}
其他{
//console.log(\"------>filter为标准+ stage.displayName +，+ organ.displayName +，+ symptom.displayName）;
复位功能（诊断）{
VAR保持=
（diag.stageId == stage.id）//同台演出？
＆功放;＆安培; （diag.organId == organ.id）//同一器官呢？
＆功放;＆安培; （diag.symptomId == symptom.id）; //相同的症状？
//如果（保持）的console.log（（保持保持：放下）++诊断？）;
返回保持;
};
}
};
您可以选择添加一个 NG-变化属性每次调用范围功能的选择变化。该功能可以简单地创建链接的选择框数组中，并用默认值填充链接选择框ngModel。
例如：
＆LT;选择NG选项=S作为s.displayName对于s分阶段
NG-模式=search.accident.stage
NG-变化=createOrgansAndSelectDefaultOrganForStage（search.accident.stage）＆GT;
＆LT; /选择＆GT;
另一种方法是使用 $范围。$腕表（'search.accident.stage'，回调）每次执行回调函数 search.accident.stage 的变化，但是这是肮脏的，更难以测试。
I have this data structure which links 3 criteria:
stages[stageid] -> organs[organid] -> symptoms[symptomid]
With the kind of join as follows:
stages[stageid] contains possible organic while organs[organid] contains possible symptoms.
I want to create an HTML form made of 3 selects which enables the user to select the observation he wants.
My current implementation (I'm not fan of) is based on filters, and has one flaw: I'm am not able to preselect default value picked when the user select a new value on the "linked" select.
Here is my code for reference:
<form>
<table>
<tbody>
<tr>
<td style="width: 40%">
Stade<br>
de la plante<br>
<select
ng-options="s as s.displayName for s in stages"
ng-model="search.accident.stage">
</select>
</td>
<td style="width: 20%">
Organe<br>
concerné<br>
<select
ng-options="o as o.displayName for o in organs | filter:accidentsSearch(search.accident.stage, null, null, accidentsDiagnosticsMenu)"
ng-model="search.accident.organ">
</select>
</td>
<td>
Symptôme<br>
observé<br>
<select
ng-options="s as s.displayName for s in symptoms | filter:accidentsSearch(search.accident.stage, search.accident.organ, null, accidentsDiagnosticsMenu)"
ng-model="search.accident.symptom">
</select>
</td>
</tr>
</tbody>
</table>
</form>
[edit]
Added the filter code:
$scope.accidentsSearch = function( stage, organ, symptom, accidentsDiagnosticsMenu ) {
console.log("------>>> filter organs for criteria: "+stage.id+", "+(organ?organ.id:"null")+", "+(symptom?symptom.id:"null"));
if (organ==null && symptom ==null) {
console.log("------>filter organs for criteria stage: "+stage.displayName+", "+organ+", "+symptom);
return function( organToCheck ) {
if (!accidentsDiagnosticsMenu) return false; // not yet prepared
var keep = accidentsDiagnosticsMenu[stage.id][organToCheck.id];
//console.log("Exploring pruned with "+stage.displayName+": "+JSON.stringify(pruned));
if (keep) {
//console.log("Checking organs "+o+"=="+organToCheck+" for stage "+ stage.displayName+ ", so keep = "+keep);
return true;
}
return false;
};
}
else
if (symptom == null) {
//console.log("------>filter for criteria stage/organ : "+stage.displayName+", "+organ.displayName+", "+symptom);
return function(symptomToCheck ) {
if (!accidentsDiagnosticsMenu) return false; // not yet prepared
var keep = accidentsDiagnosticsMenu[stage.id][organ.id][symptomToCheck.id];
//console.log("---- Exploring pruned with "+stage.id+", "+organ.id+": "+JSON.stringify(accidentsDiagnosticsMenu[stage.id][organ.id]));
if (keep) {
//console.log("Checking symptom "+symptomToCheck.id+" for stage "+ stage.id+" and organ "+organ.id+ ", so keep = "+keep);
return true;
}
return false;
};
}
else {
//console.log("------>filter for criteria "+stage.displayName+", "+organ.displayName+", "+symptom.displayName);
return function( diag ) {
var keep =
(diag.stageId == stage.id) // same stage?
&& (diag.organId == organ.id) // same organs?
&& (diag.symptomId == symptom.id); // same symptoms?
//if (keep) console.log((keep?"Keep":"Drop")+" "+diag);
return keep;
};
}
};
You can add an ng-change attribute on select to call a scope function every time the selection changes. The function can simply create the array for the linked select box, and populate the linked select box ngModel with a default value.
For example:
<select ng-options="s as s.displayName for s in stages"
ng-model="search.accident.stage"
ng-change="createOrgansAndSelectDefaultOrganForStage(search.accident.stage)">
</select>
Another way is to use $scope.$watch('search.accident.stage', callback) to execute the callback function every time search.accident.stage changes, but this is dirtier, and harder to test.
这篇关于angularjs：什么是做一个三标准选择的最佳方式，规定的标准是连在一起的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
