Setting the values in multi-select isteven of angular js

Question

I'm trying to use Angularjs multi-select into my project.

The following 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 $scope.marks is a global variable which I couldn't change..

Is there any way to set the values in multi-select without using the input-model?

Can you clarify a bit more? Where is marks supposed to be coming from? Why can't you change it? — Esteban Felix
– Esteban Felix, Commented Oct 1, 2015 at 7:04
@Esteban $scope.marks is a global variable in my controller.But I want to set the values of multi-select in my controller dynamically.But if I set it dynamically in controller the original global variable is replacing — Harini
– Harini, Commented Oct 1, 2015 at 11:34

user5395947 · Accepted Answer · 2015-10-01 07:07:01Z

Well, doing some tests here, i could get something with 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>

Thanks @Diego For your answer.BUt My project is already using the multi-select which I shouldn't change.

Malik Zahid · Accepted Answer · 2019-05-27 10:05:24Z

Set & Get selected values, name and text of 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 (on change)

$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 item (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;
    });
}

Collectives™ on Stack Overflow

Setting the values in multi-select isteven of angular js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related