Đặt giá trị trong nhiều lựa chọn isteven của góc js

Question

Tôi đang cố gắng sử dụng Angularjs đa lựa chọn trong dự án của mình.

html sau là div chọn nhiều của tôi.

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

Tôi biết rằng tôi có thể sử dụng $ scope.marks = dữ liệu trong bộ điều khiển.

Nhưng vấn đề là $ scope.marks là biến toàn cầu mà tôi không thể thay đổi..

Có cách nào để đặt giá trị ở chế độ đa lựa chọn mà không sử dụng mô hình đầu vào không?

Answer 1

Vâng, làm một số xét nghiệm ở đây, tôi có thể có được một cái gì đó với 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>