Ustawianie wartości w multi-select isteven of kątowe js

Question

Próbuję użyć multi-select Angularjs w moim projekcie.

Następujący html to mój div wielokrotnego wyboru.

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

Wiem, że mogę użyć $ scope.marks = danych w kontrolerze.

Ale problem polega na tym, że $ scope.marks jest zmienną globalną, której nie mogłem zmienić..

Czy istnieje sposób na ustawienie wartości w trybie wielokrotnego wyboru bez użycia modelu wejściowego?

Answer 1

Cóż, robi kilka testów tutaj, mogę dostać coś z multiselecting:

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, 0, 0.3); 
 
    border-radius: 10px; 
 
} 
 
::-webkit-scrollbar-thumb { 
 
    border-radius: 10px; 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 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>