AngularJS多选不显示预选选项

Question

当我需要为表单上的实体分配多个值时，我大部分时间都在研究解决方案。

所以，我的想法是我有一个名为 QualityData 的实体，这个实体可以有不同的 MechanismIdentifiers。

我想到的最佳解决方案，使用multiple select。

结合这两种解决方案一切正常：

AngularJS selecting multiple options

Get value when selected ng-option changes

我可以访问所选选项的数组，将其分配给我的实体等...但是我有一个“次要”后备，即我无法获得预选的选项（那些来自服务器加载数据进行编辑时）在使用动态方法（如<option ng-repeat> 或ng-options）时在选择字段中突出显示，它仅在对选项进行硬编码时才有效。另一个错误是，如果我希望添加比预选数组中的值更多的值，它会在使用动态方法时删除其中存在的所有值，在编码时工作正常。

标记：

<select multiple ng-change="showAlert(selectedValues)" ng-model="selectedValues">
                    <!--ng-options="resDatasIdOfMechanism as resDatasIdOfMechanism.name for resDatasIdOfMechanism in resDatasIdOfMechanisms track by resDatasIdOfMechanism.id" value="resDatasIdOfMechanism.id">-->

                   <option value="1">{{resDatasIdOfMechanisms[0].name}}</option>
                    <option value="2">{{resDatasIdOfMechanisms[1].name}}</option>
                    <option value="3">{{resDatasIdOfMechanisms[2].name}}</option>
                </select>

如果我尝试使用被注释的行，那么标记的选项将不起作用

控制器：

$scope.selectedAlready = [{id:1, name:"Based on Antibiogram"}];
            $scope.selectedMechanisms=[];
            $scope.resDatasIdOfMechanisms = [{id:1,name:"Based on Antibiogram"}, {id:2,name:"Molecular"}, {id:3,name:"Genetic"}];
            $scope.selected = $scope.selectedAlready;

            $scope.selectedValues = [];

            $scope.$watch('selected', function(nowSelected){
                $scope.selectedValues = [];
                if( ! nowSelected ){
                    return;
                }
                angular.forEach(nowSelected, function(val){
                    $scope.selectedValues.push( val.id.toString());
                    console.log("look");
                });
            });

            $scope.showAlert=function(listOfMultipleChoices){
                //alert(object);
            }

编辑添加有效的 jsfiddle 链接，但我仍然没有找到原始问题的解决方案：https://jsfiddle.net/StevenEvenSteven/ybapx09w/

Answer 1

您的代码中有错字。

在控制器定义中的'$scope' 之后添加一个逗号

fiddleApp.controller('myFiddle', ['$scope', function($scope) {

我已经分叉了你的jsfiddle，它正在按你的预期工作。