1

我有 2 个由 angularjs 和相关控制器处理的选择。

第二次选择的选项取决于第一次选择中的用户选择。

我有这段代码，如下：

                <tr>
                    <td>
                        Stade<br/>
                        <select data-ng-options="s.displayName for s in stages" 
                                data-ng-model="accidentSearchSelectedStage"
                                onChange="javascript:getAccidentsModel(this)"
                                >
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        Organe<br/>
                        <select data-ng-options="o.displayName for o in organs | filter:accidentsSearch(accidentSearchSelectedStage, null, null, accidentsDiagnosticsMenu)" 
                                data-ng-model="accidentSearchSelectedOrgan"
                                onChange="javascript:getAccidentsModel(this)"
                                >
                        </select>
                    </td>
                </tr>

编辑 1：添加过滤器代码片段

$scope.accidentsSearch = function( stage, organ, symptom, accidentsDiagnosticsMenu ) {

    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

            organToCheck =  organToCheck.displayName;
            var pruned = accidentsDiagnosticsMenu[stage.displayName];
            //console.log("Exploring pruned with "+stage.displayName+": "+JSON.stringify(pruned));

            for (var o in pruned) {
                // Find one with same organs?
                var keep = (o == organToCheck);
                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 ) {

Q1）这很好用，除了它有时会在第二次选择中选择一个空的附加选项，具体取决于它具有的先前选择的值。

如何解决这个问题？

Q2) 我需要在做出新选择时执行旧版 javascript 代码。'onchange' 属性是正确的做法，还是有 angularjs 的做法？

编辑 2：$watch 路径探索

我探索了一个在连接到每个选择的模型上使用 $watch 的解决方案，如下所示：

$scope.$watch('accidentSearchSelectedStage', function (newValue, oldValue) {
    console.log("accidentSearchSelectedStage changed from "+oldValue.id+" to "+newValue.id);
});

$scope.$watch('accidentSearchSelectedOrgan', function (newValue, oldValue) {
    console.log("accidentSearchSelectedOrgan changed from "+oldValue.id+" to "+newValue.id);
    //$scope.accidentSearchSelectedSymptom = $scope.symptoms[0];
});

日志没问题，但我被困在这一点有两个原因：

  1. 说阶段的选择和过滤器的执行之间的时间图是什么？
  2. 在哪里以及如何编码来检查器官和症状的值是入站的？
4

1 回答 1

0

如果模型设置为可用选项以外的其他内容，则该select指令将自动为该值创建一个选项。否则它将不知道应该选择哪一个。理论上它可能是第一个，但我相信 Angular 的人有这样做的正当理由。

无论如何，您基本上只需要在控制器中引导您的数据，以确保如果它没有有效选项，只需将其设置为默认选项即可。

例如

var data = getDataFromSomeSource();
var validOptions = ['foo','bar','default'];
if(validOptions.indexOf(data.option) < 0) {
    data.option = 'default';
}

RE：#2 -onchange可能是目前最简单的方法，如果这只是暂时的，那么添加额外/不必要的非角度代码没有意义，直到你移植所有内容。

于 2014-05-07T22:48:13.700 回答