Question

我正在使用Angular-Select2，我需要的是实际更改时收集的值不仅仅是当前所选选项的名称。例如，如果选择了Red，Blue，Yellow选项，则当前值是这些值的数组。我想要做的是在选择框下方显示所有选择的颜色（在此示例中）。它到目前为止工作 - ＆＃34;颜色＆＃34;显示，当我从选择框中删除一个（作为标签，通过单击X标志），底部相应地更新。

我需要进一步完成的是发送其他值，或至少一个（id），以便我可以查询我的数据库。我知道，我可以在实际名称之前包含它，然后在我的列表中删除以便能够单独操作它，但是ID也会显示在下拉列表和所选选项中。

如何进行？是否有任何可能附加到选项并在以下区域内发送和读取的文本选择选项＆＃39;文字显示。

我正在寻找像这样的变化：

$scope.$watch('selectDiseaseState', function(newVal){
    $scope.listDiagnosis = newVal;
});

编辑：如果感到困惑 - 这是多选下拉列表。编辑：

select2标记：

<select id="mySel2" ng-model="selectDiseaseState" class="form-control" multiple="multiple" placeholder="Start typing a name of disease state...">
    <optgroup ng-repeat="item in select" label="{{item.label}}">
        <option ng-repeat="option in item.options">{{option.value}}</option>
    </optgroup>
</select>

Answer 1

您需要使用对象数组而不是简单数组绑定ng-model绑定中的ng-options。然后，您可以在下拉列表中查看更改，newvalue将是包含所有属性的对象。的 HTML

<div ng-app='app' ng-controller='controller'> <select ng-model='selectDiseaseState' ng-options='item as item.Color for item in selectOptions'> </select> </div>

角度代码： var app = angular.module（'app'，[]） .controller（'controller'，function（$ scope）{

$scope.selectOptions = [ {Id: 1, Color: 'Red'}, {Id: 2, Color: 'Blue'}, {Id: 3, Color: 'Green'}, {Id: 4, Color: 'Yellow'} ]; $scope.selectDiseaseState = {}; $scope.$watch('selectDiseaseState', function(newVal){ $scope.listDiagnosis = newVal; alert('Id: '+ $scope.listDiagnosis.Id + ' and Color: '+ $scope.listDiagnosis.Color); });

}）;

<强> DEMO

我的Angular Select2下拉列表需要传递的值多于选项＆＃39;变更事件的名称

1 个答案: