0

我正在使用 Angular-Select2，实际上我需要的是在更改时收集一些比当前选择的选项名称更多的值。例如，如果选择了 options Red、Blue、Yellow，则当前值是这些值的数组。我想要做的是在选择框下方显示所有（在本例中）选择的颜色。到目前为止它的工作原理 - “颜色”正在显示，当我从选择框中删除一个（作为标签，通过单击 X 符号）时，底部会相应更新。

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

如何进行？是否有任何内容可以附加到选项并在显示文本选定选项文本的以下区域内发送和阅读。

我期待着这样的变化：

$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>
4

1 回答 1

0

您需要使用对象数组而不是简单数组来绑定您ng-model的绑定。ng-options然后，您可以观察下拉列表中的更改，新值将是包含所有属性的对象。 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);
});

});

演示

于 2014-08-29T18:01:55.037 回答