CODEWITHSUNDEEP
angularjsmulti-select
Kumail Hussain
Kumail Hussain

Reputation: 879

AngularJS Dropdown Multiselect Options not binding

I am using AngularJS Dropdown Multiselect - http://dotansimha.github.io/angularjs-dropdown-multiselect/ the problem I am facing is the option attribute that is not binding to the model 

        <div style="margin: 5%" checkboxes="true"
  ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>

For example:

if model is :

    $scope.example1model = [];

    $scope.example1data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"} ];

Issue: the binding for options doesn't seems to work correctly as I am getting only Id(s) rest is working fine, if I check David and John ,the options binding with $scope.example1model show only the id not the label i.e : [{"id":1},{"id":2} but what I want is 

[
  {
    "id": 1,
    "label": "David"
  },
  {
    "id": 2,
    "label": "John"
  }
]

Upvotes: 0

Views: 4231

Answers (2)

Serchstack
Serchstack

Reputation: 151

Set externalIdProp as empty string

$scope.extraSettings = {
    externalIdProp: ''
  };

html

<div ng-dropdown-multiselect="" options="options" selected-model="myModel" extra-settings="extraSettings"></div>

Works for me, I'm using ^1.11.8

Upvotes: 3

Arun
Arun

Reputation: 460

you can try like below.

	<!DOCTYPE html>
	<html>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<body>

	<div ng-app ="sortApp" ng-controller ="mainController">
					<!DOCTYPE html>
<html lang="eng-US">
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	</head>
	<body>
	    <select class="multiselect" data-placeholder="Select Products" 
      ng-model="example1model" ng-options="item as item.label for item in example1data"
      multiple="multiple" multiselect-dropdown >
     </select>
	 {{example1model}}
		 <div style="margin: 5%" checkboxes="true" ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>
	</body>
</html>
				</div>
	<script>
	angular.module('sortApp', [])

	.controller('mainController', function($scope) {
	 $scope.example1model = [];

    $scope.example1data = [ {id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"} ];
	
	});
	</script> 

	</body>
	</html>

Upvotes: 0

Related Questions