Question

我正在尝试在选择多选中使用角度绑定而不使用主数组来保存值（大多数示例我看到通过ng-options和ng-model直接绑定到选择标记，但我可以' t使用一个简单的数组来存储当前在选项之外的数据，但是如果在选项本身中选择了选项则需要存储。）

以下是使用ng-selected最初根据选项中的“selected”属性选择值的示例： http://jsfiddle.net/armyofda12mnkeys/aLkLqqL6/3/ 我希望我可以在选项标签上的上面的代码中添加一个ng-model =“choice.selected”（但这不起作用，因为ng-model不适用于选项标签）。

什么是绑定到每个单独选择对象的最佳方式？也许某种类型或手动更改事件的$ watch会起作用？感谢任何想法/小提琴

P.S。我这样做的原因是这个模型通常设置为'网格'问题，有10个复选框在屏幕上水平移动，每个选项设置其选定的属性，如复选框的正常...但在移动布局，我将'网格视图'切换为本机多选下拉列表，在移动设备上看起来更好，但它必须使用我无法弄清楚的相同模型。

var myApp = angular.module（'myApp'，[]）;

var myApp = angular.module('myApp',[]);


myApp.controller("MyCtrl", function ($scope) {

    $scope.main_question = 
    {
         qid: 'QS1', 
         question_type: 'dropdown', 
         text: 'What country you from? ',
         dropdownAnswer: 'CA',
         choices: [
             {option_value: 'US', option_txt: 'United States', selected: false},
             {option_value: 'CA', option_txt: 'Canada', selected: true},
             {option_value: 'MX', option_txt: 'Mexico', selected: false},
             {option_value: 'DE', option_txt: 'Germany', selected: true},
             {option_value: 'NN', option_txt: 'None of the Above (exclusive, should unset other options)', selected: false}
         ]
    };
    
  
        
});

select {
   height: 10em; 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        
        
        <div>
            {{main_question.qid}}. {{main_question.text}}<br/>
            <select              
              name="{{main_question.qid}}" 
              id="{{main_question.qid}}"  
              multiple="multiple"
            >
              <option value="" id="{{main_question.qid}}_not_picked">--Please Choose--</option>
              <option
                ng-repeat="choice in main_question.choices"
                id="{{main_question.qid}}_{{choice.option_value}}"
                ng-value="{{choice.option_value}}"
                ng-selected="choice.selected"                
                >{{choice.option_txt}}</option>
            </select>
            
        </div>
        
        <br/>{{main_question.choices}}
       
          
    </div>
</div>

Answer 1

您可以使用 ng-click 来反转选择：

<option
                ng-repeat="choice in main_question.choices"
                id="{{main_question.qid}}_{{choice.option_value}}"
                ng-selected="choice.selected"                   
                ng-click="choice.selected = ! choice.selected"
                >{{choice.option_txt}}</option>

查看jsbin

如何将角度绑定到单个选项对象的属性而不是ng-model数组以选择多个下拉列表

1 个答案: