angularjs – 设置多重选择的值isteven of angular js

发布时间：2020-12-17 18:08:48 所属栏目：安全来源：网络整理

导读：我正在尝试将 Angularjs multi-select用于我的项目. 以下html是我的多选div. div multi-select input-model="marks" output-model="filters.marks" button-label="name" item-label="name" tick-property="ticked" selection-mode="multiple" helper-element

我正在尝试将 Angularjs multi-select用于我的项目.

以下html是我的多选div.

<div     
                multi-select
                input-model="marks"
                output-model="filters.marks"
                button-label="name"
                item-label="name"
                tick-property="ticked"
                selection-mode="multiple"
                helper-elements="all none filter"
                on-item-click="fClick( data )"
                default-label="Select marks"
                max-labels="1"
                max-height="250px"

            >
            </div>

我知道我可以在控制器中使用$scope.marks = data.

但问题是$scope.marks是一个全局变量,我无法改变..

有没有办法在不使用输入模型的情况下在多选中设置值？

解决方法

好吧,在这里做一些测试,我可以得到多选的东西：

var languages = ["C#","Java","Ruby","Go","C++","Pascal","Assembly"]; //The items.

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
  $scope.marks = {};
  for (lang in languages) {
    $scope.marks[lang] = {
      name: languages[lang],marked: false
    };
  }

  $scope.marks[3].marked = true; //mark "Go" and "C++" by default.
  $scope.marks[4].marked = true;

  $scope.theMarkedOnes = function() {
    outp = "";
    for (m in $scope.marks) {
      if ($scope.marks[m].marked)
        outp += $scope.marks[m].name + ",";
    }
    if (outp.length == 0) {
      return "(none)";
    } else {
      return outp.substr(0,outp.length - 2);
    }
  }
  $scope.setMark = function(markone) {
    markone.marked = !markone.marked;
  }

})

*,*:before,*:after {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  font-size: 0.7em;
}
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0.5);
}
.multiselector {
  background-color: #CCCCCC;
  overflow-y: scroll;
  width: 17em;
  height: 13em;
  border-radius: 0.7em;
}
.multiselector .item {
  cursor: pointer;
  padding: 0.2em 0.3em 0.2em 0.0em;
}
.itemtrue {
  background-color: #9999AA;
}
.msshow {
  background-color: #cccccc;
  border-radius: 0.7em;
  margin-top: 1em;
  padding: 0.6em;
  width: 17em;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div class="multiselector">
    <div ng-repeat="mark in marks" class="item item{{mark.marked}}" ng-click="setMark(mark)">{{mark.name}}</div>
  </div>

  <div class="msshow"> <b>Selected:</b> {{theMarkedOnes()}}</div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!