Setting values ​​in multi-select isteven from angular js

Question

I am trying to use Multi-select Angularjs in my project.

The next html is my multi-select 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> 

I know that I can use $ scope.marks = data in the controller.

But the problem is that $ scope.marks is a global variable that I could not change. .

Is there a way to set values ​​in multi-select without using an input model?

Answer 1

Well, having done some tests here, I could get something using 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> 

Answer 2

Set and get selected values, name and text Angularjs isteven-multi-select

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

Add Items

 $scope.marks= [ { name: 'Mark I', value: 'Mark i', text: 'This is Mark 1', ticked: true }, { name: 'Mark II', value: 'Mark ii', text: 'This is Mark 2' }, { name: 'Mark III', value: 'Mark iii', text: 'This is Mark 3' } ]; 

Get selected item (when modified)

 $scope.fClick = function (data) { console.log(data.name); console.log(data.value); console.log(data.text); return; } 

Select item (with code)

 $scope.abc = function (data) { console.log(data.element1, data.element2); angular.forEach($scope.marks, function (item) { if (item.value == data.element1) { item.ticked = true; } else { item.ticked = false; } }); } 

Deselect (clear)

 $scope.ClearClick = function () { $scope.Filter = { selectMarks: 'Mark i' }; $scope.marks.map(function (item) { if ($scope.Filter.selectMarks == item.value) item.ticked = true; else item.ticked = false; }); }