AngularJS Multiselect复选框下拉列表问题

时间:2017-08-10 12:26:31

标签: javascript angularjs

我有一个带有多选下拉列表的弹出窗口。

多选下拉代码

<select name="edit_tags" class="form-control" id="advisor_article_tagsx" multiple="" 
   required ng-model="article_selected" ng-options="article_service as article_service.name for article_service in article_services">
</select>

有一个数组article_services用于多选,我从下面的代码中获取这个数组。

$http.get(url + 'service_provided').
     then(function (response) {
         $scope.article_services = response.data.service_provided;
         //$scope.article_selected = [$scope.article_services[0], $scope.article_services[1]];
});

现在我希望当我点击带有ng-click="advisor_article_edit()"的编辑按钮打开弹出窗口时,我的多选复选框会带来一些选择。 我希望Select必须在下面的函数中工作,但遗憾的是它不起作用。

$scope.advisor_article_edit = function () {
        // I need selection work from here. But it doesn't.
        $scope.article_selected = [$scope.article_services[3]];
 }

2 个答案:

答案 0 :(得分:1)

我相信您需要触发点击:

var cb = angular.element('some-selector');
cb.triggerHandler('click');

这应该在指令中完成,因为它是dom操作

答案 1 :(得分:1)

它应该有效,就像在片段中一样。: -

&#13;
&#13;
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  
  $scope.cars = [{id:1, name: 'Audi'}, {id:2, name: 'BMW'}, {id:1, name: 'Honda'}];
  $scope.advisor_article_edit = function () {       
        $scope.article_selected = [$scope.cars[1]];
  }
});
&#13;
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
<select name="edit_tags" class="form-control" id="advisor_article_tagsx" multiple="" 
   required ng-model="article_selected" ng-options="car as car.name for car in cars">
</select>

<button ng-click="advisor_article_edit()">Edit</button><br>
Selected : {{article_selected}}
</div>
&#13;
&#13;
&#13;

Working Plunkar Link