alalonde / angular-multi-select Goto Github PK
View Code? Open in Web Editor NEWA multi-select directive for AngularJS
License: MIT License
A multi-select directive for AngularJS
License: MIT License
Hello,
I tried using the directive in my app and I get the above error when I select an item.
here is the stack trace:
TypeError: Cannot set property 'selected' of undefined
at setter (http://localhost:8081/xx/js/angular.js:10081:12)
at extend.assign (http://localhost:8081/xx/js/angular.js:9922:16)
at $setViewValue (http://localhost:8081/xx/js/angular.js:16554:7)
at http://localhost:8081/xx/js/angular.js:16097:12
at Scope.$eval (http://localhost:8081/xx/js/angular.js:11697:28)
at Scope.$apply (http://localhost:8081/xx/js/angular.js:11797:23)
at Scope.$delegate.__proto__.$apply (<anonymous>:864:30)
at HTMLInputElement.<anonymous> (http://localhost:8081/xx/js/angular.js:16096:11)
at HTMLInputElement.x.event.dispatch (http://code.jquery.com/jquery-1.10.2.min.js:5:14129)
at HTMLInputElement.v.handle (http://code.jquery.com/jquery-1.10.2.min.js:5:10873) angular.js:9199
(anonymous function) angular.js:9199
(anonymous function) angular.js:6752
Scope.$apply angular.js:11799
$delegate.__proto__.$apply VM20301:864
(anonymous function) angular.js:16096
x.event.dispatch jquery-1.10.2.min.js:5
v.handle
I'm using Angular 1.2.4
<multi-select ng-model="ruleset.sharedRuleList" available="rules" selected-label="Current rules" available-label="Available rules" display="r as r.domain_data"></multi-select>
html :
controller :
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$scope.legends = [];
$scope.update = function(data){
console.log("asdas");
};
$scope.applyChart = function(){
$scope.chart();
$scope.digest();
}
$scope.chart = function(){
// Set the dimensions of the canvas / graph
var margin = {
top : 30,
right : 20,
bottom : 70,
left : 50
}, width = 600 - margin.left - margin.right, height = 300 - margin.top
- margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([ 0, width ]);
var y = d3.scale.linear().range([ height, 0 ]);
// set the colour scale
var color = d3.scale.category10();
// Define the axes
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line().x(function(d) {
return x(d.Date);
}).y(function(d) {
return y(d.Number);
});
// Adds the svg canvas
var canvas = d3.select("#chart").append("svg").attr("width",
width + margin.left + margin.right).attr("height",
height + margin.top + margin.bottom).append("g").attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var legend = d3.select("#legend");
// Get the data
d3
.json(
"app/module/esa/assignment-listing-details/testData.json",
function(data) {
var keys = [];
var counter = 0;
var set=[];
data.forEach(function(d) {
d.Date = parseDate(d.Date);
d.Number = +d.Number;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.Date;
}));
y.domain([ d3.min(data, function(d) {
return d.Number;
}), d3.max(data, function(d) {
return d.Number;
}) ]);
// Nest the entries by symbol
var dataNest = d3.nest().key(function(d) {
return d.Legend;
}).entries(data);
legendSpace = width / dataNest.length; // spacing for the legend
// Loop through each symbol / key
dataNest
.forEach(function(d, i) {
canvas.append("path").attr("class", "line")
.style("stroke", function() { // Add the colours dynamically
return d.color = color(d.key);
}).attr("id", 'tag' + d.key) // assign ID
.attr("d", valueline(d.values))
.attr("show","true");
// Add the Legend
canvas
.append("text")
.attr(
"x",
legendSpace / 2 + i
* legendSpace)
// space legend
.attr("y", height + 50)
.attr("class", "legend")
// style the legend
.style("fill", function() { // Add the colours dynamically
return d.color = color(d.key);
})
.on(
"click",
function() {
// Determine if current line is visible
var active = d.active ? false
: true, newOpacity = active ? 0
: 1;
// Hide or show the elements based on the ID
d3
.select(
"#tag"
+ d.key)
.style(
"opacity",
newOpacity);
// Update whether or not the elements are active
d.active = active;
}).text(d.key);
keys[counter] = d.key;
set[counter] = d;
$scope.legends[counter] ={name: d.key, maker: d.key, ticked: false};
counter++;
});
legend
.on("change",
function() {
var value = document.getElementById("legend").value;
var tag = document.getElementById("tag"+value);
var show = tag.getAttribute("show")
var newShow = true;
if(show == "true")
{
newShow = false;
}
else{
newShow = true;
}
var newOpacity = newShow ? 1 : 0 ;
// Hide or show the elements based on the ID
d3
.select(
"#tag"
+ value)
.style(
"opacity",
newOpacity);
// Update whether or not the elements are active
tag.setAttribute("show",newShow);
})
.selectAll("option").data(keys)
.enter().append("option")
.attr("id",String)
.text(String);
});
// Add the X Axis
canvas.append("g").attr("class", "x axis").attr(
"transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
canvas.append("g").attr("class", "y axis").call(yAxis);
};
Hey,
Is there a way to switch the ordering of the selects? So make available entities on the left and selected on the right?
Thanks,
Donovan
Hey there, i have a Issue with ie11 where it doesn't let me select something from the available ones.
In some cases i can select the selected one but as soon i press the red arrow, it just reloads the page. there are no errorcodes in any console.
Great job!!!, Awesome directive.
An issue to get it more flexible will be allow custom views for items (using transclusion)
I hope could be usefull.
I tried to get it working with a Service which get's the roles from the backend. But i can't get it working.
Here is a plunker: http://plnkr.co/edit/rIWYjBZ7vFJzd7fsMHr6?p=preview
How can i get it to work with the Roles service?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.