如何从选择选项中选择多个选定值

时间:2015-06-22 16:33:22

标签: angularjs model-view-controller ionic-framework ionic

我的控制器代码看起来像

$scope.items = [{
    heading: 'Sports',
    types: [{
        name: 'Football',
    }, {
        name: 'Persie',
    }, {
        name: 'Ronaldo',
    }, {
        name: 'Messy',
    }],
    id: '1'
}, {
    heading: 'Cricket',
    types: [{
        name: 'Tendulkar',
    }, {
        name: 'Lara',
    }, {
        name: 'Ponting',
    }],
    id: '2'
}];

我的观点包含以下内容:            当用户单击提交按钮

时,如何获取所选的选项值

1 个答案:

答案 0 :(得分:2)

这是jsfiddle 我使用ng-repeat来构建select和ng-options来填充它们,然后你必须使用相对的ng-model来获得选择。

HTML:

<div ng-app ng-controller="MyCtrl">
  <select class="select fancy" ng-repeat="(i, item) in items" ng-model="searchOption[i]" ng-options="type.name for type in item.types"></select>
  <button ng-click="submitIt()">Submit</button>
</div>

使用Javascript:

function MyCtrl($scope) {
    $scope.submitIt = function () {
        console.log($scope.searchOption);
    };

    $scope.searchOption = [];

    $scope.items = [{
            heading: 'Sports',
            types: [{
                name: 'Football',
    }, {
                name: 'Persie',
    }, {
                name: 'Ronaldo',
    }, {
                name: 'Messy',
    }],
            id: '1'
  }, {
            heading: 'Cricket',
            types: [{
                name: 'Tendulkar',
    }, {
                name: 'Lara',
    }, {
                name: 'Ponting',
    }],
            id: '2'
  }];
}