Tag Archives: AngularJS

Select Not Showing Selected Values – AngularJs

Hey everyone,

I had a bit of trouble getting a selected option to show up with AngularJs. It turned out that I needed to add an ng-selected attribute:

    {{command.Status}}
    <select ng-model="command.Status">
        <option ng-selected="command.Status == 0" value="0">Enabled</option>
        <option ng-selected="command.Status == 1" value="1">Disabled</option>
        <option ng-selected="command.Status == 2" value="2">Deleted</option>
    </select>

Check out this Stackoverflow post for more info: http://stackoverflow.com/a/18336858/522859

angular js calling services twice – Angular JS

Hey everyone,

I had a few of my AngularJS services being called twice. The issue turned out to be that I’d added a controller to both my route and my view:

app.config(function ($routeProvider) {
    $routeProvider
		.when('/', {
		    controller: 'ProjectsController', /* <---- here */
		    templateUrl: '/Home/Home'
		})
<div>
    <ul ng-controller="ProjectsController"><!-- <-- here -->
        <li ng-repeat="project in projects">
            <b>{{project.Name}}</b>
        </li>
    </ul>
</div>

Removing it from the controller resolved the issue. Check out the following StackOverflow post for more info: http://stackoverflow.com/a/15535724/522859

Error: $injector:modulerr Module Error – AngularJS

Hey everyone,

Just getting back into angularjs and I came across the following error:

Unknown provider: $routeProvider

It turns out I that while I had included the route provider file I had missed adding it to the app:

 
//Original
var app = angular.module('commandsApp', [']);
 
//Fixed
var app = angular.module('commandsApp', ['ngRoute']);

Check out the following links if you’re still having issues:
http://plnkr.co/edit/zbG9Vycrxk6mmlzwfTRm?p=preview
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

Random Class Directive – AngularJS

Hey everyone,

Just another small directive. This one adds a random class from the provided array to the element.

Check out this fiddle to see the demo: http://jsfiddle.net/uvSVj/3/

Random Background Directive

Random Background Directive

I used this directive to add a random background to each of my wrapper divs:

Random Background Real World Usage

To use it in your app simply define a list of classes in your controller:

app.controller("MyCtrl", function MyCtrl($scope) {
 
    /* A random class is picked from this list */
    $scope.classes = [
        //"bg-buildings",
        "red",
        "blue",
        "yellow",
        "green",
        "orange",
        "black",
        "purple"
    ];        
});

Then add the directive to your page (can be an existing element):

<div class="test" ng-random-class ng-classes="classes"></div>

A random class will then be selected from the list and appended to the elements current list of classes (if any).

The easiest way to see how it’s done is probably just to check out the fiddle above, but there’s a code dump below if you need it:

The Random Class Directive

app.directive("ngRandomClass", function () {
    return {
        restrict: 'EA',
        replace: false,
        scope: {
            ngClasses: "="
        },
        link: function (scope, elem, attr) {            
 
            //Add random background class to selected element
            elem.addClass(scope.ngClasses[Math.floor(Math.random() * (scope.ngClasses.length))]);
        }
    }
});

Sample Html

<div ng-app="myApp">
    <!--Shameless link back to blog -->
    <h1>Random Class Directive</h1>
    <a href='http://www.whatibroke.com/?p=899'>www.whatibroke.com</a>
 
    <!-- Identical divs with random class directive added -->
    <div ng-controller="MyCtrl">
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
        <div class="test" ng-random-class ng-classes="classes">
        </div>
    </div>
</div>

Sample JS

/* 
    http://www.whatibroke.com/?p=899
    Adds a random class to element
    Usage: add ng-random-class to element
*/
 
var app = angular.module('myApp', []);
 
app.controller("MyCtrl", function MyCtrl($scope) {
 
    /* A random class is picked from this list */
    $scope.classes = [
        //"bg-buildings",
        "red",
        "blue",
        "yellow",
        "green",
        "orange",
        "black",
        "purple"
    ];        
});

Sample Styles

/* Just a demo div */
.test{
    width: 50px;
    height: 50px;
    margin: 10px;
    padding: 5px;
    float: left;   
    -webkit-transition: 400ms linear all;
	-moz-transition: 400ms linear all;
	-ms-transition: 400ms linear all;
	-o-transition: 400ms linear all;
	transition: 400ms linear all;
    cursor: pointer;
    border-radius: 10px;    
}
 
.test:hover{
    opacity: 0.8;    
}
 
body{
	background-color: #F0F0F0;
	font-family: "Lato", sans-serif;
	font-weight: 300;
	color: #363636;
    text-align: center;
    vertical-align: middle;
}
 
/* Random classes */
.red {
    background-color: red !important;
    height: 75px;
    width: 75px;
}
 
.blue {
    background-color: blue !important;
    height: 40px;
    width: 40px;
}
 
.yellow {
    background-color: yellow !important;
    height: 20px;
    width: 20px;
}
 
.green {
    background-color: green !important;
    height: 63px;
    width: 63px;
}
.purple {
    background-color: purple !important;
    height: 82px;
    width: 82px;
}
.black {
    background-color: black !important;
    height: 29px;
    width: 29px;
}
.orange {
    background-color: orange !important;
    width: 42px;
    height: 42px;
}

Let me know if you run into any issues and feel free to use/change however you want.

Route Parameters – AngularJS

Hey everyone,

This is just a quick post on what I did to get my routes working properly with AngularJS. My routes looked like this:

//Configure routes
app.config(function ($routeProvider) {
    $routeProvider
		//...
        .when('/Businesses/Details/:id', {
            templateUrl: '/Businesses/Details'
        })
        //...
	.otherwise({
	    redirectTo: '/'
	});
});

And then to access the ID parameter I used $routeParams:

 
/* Used to display the lesson planner for customers */
app.controller("CustomerPlannerController", function ($scope, $routeParams /*, ... */) {
     console.log($routeParams);
     console.log($routeParams.id);
}

Using that setup, a route to /Businesses/Details/:id will display the following output in the console:

//Route to: /Businesses/Details/:id
Object {id: "1"} 
1

Note that you can call ID whatever you want, just make sure you change your route to match. Hopefully that’ll be enough to get you going, but if you have any issues check out these links:
http://stackoverflow.com/a/11064503/522859
http://docs.angularjs.org/api/ngRoute.$routeParams

TimeSelector / TimePicker Directive – AngularJS

Hey everyone,

I’ve been mucking around with directives for that last few days and one of my requirements has been a simple timepicker. Nothing too fancy, but if anyone would like to use it – feel free.

See the following fiddle for the demo: http://jsfiddle.net/LFB3F/2/

Timepicker Directive

Timepicker Directive

The directive is initialised with both the hour and minute defaults being set like this:

<ng-time-selector hours="hours" minutes="minutes"></ng-time-selector>

Note that hours and minutes should be set in the controller that wraps around the Timepicker:

app.controller("MyCtrl", function MyCtrl($scope) {
    $scope.hours = 11;
    $scope.minutes = 45;       
});

The hours and minutes will then be updated whenever the user changes the value. If you need any other hooks it’s fairly easy to modify and there are a heap of comments.

You may also want to put the HTML in an external template. Just make the following changes to the directive (note templateURL):

app.directive("ngTimeSelector", function () {
    return {
        restrict: 'EA',
        templateUrl: '/Directives/TimeSelector',
        scope: {
            hours: "=",
            minutes: "="
        },
        replace: true,
        link: function (scope, elem, attr) {
...
...

The JSFiddle is probably the easiest way to see how it all works. You can simply copy it from there to your app. Alternatively, I’ve dumped the code below:

Uncondensed HTML (for those who prefer to use a template)

<div class="timeSelectorDirective"> 
    <div class="section hours">
        <div class="increase" ng-click="increaseHours()">
            <i class="icon fa fa-caret-up"></i>
        </div>
        <div class="display">
            {{displayHours()}}
        </div>        
         <div class="decrease" ng-click="decreaseHours()">
            <i class="icon fa fa-caret-down"></i>
        </div>
    </div>
    <div class="section minutes">
        <div class="increase" ng-click="increaseMinutes()">
            <i class="icon fa fa-caret-up"></i>
        </div>
        <div class="display">
            {{displayMinutes()}}
        </div>        
         <div class="decrease" ng-click="decreaseMinutes()">
            <i class="icon fa fa-caret-down"></i>
        </div>
    </div>    
    <div class="section hours">
        <div class="increase" ng-click="switchPeriod()">
            <i class="icon fa fa-caret-up"></i>
        </div>
        <div ng-if="hours >= 12" class="display">
            PM
        </div>
        <div ng-if="hours < 12" class="display">
            AM
        </div>   
         <div class="decrease" ng-click="switchPeriod()">
            <i class="icon fa fa-caret-down"></i>
        </div>
    </div>
</div>

Timepicker Directive

/* 
    http://www.whatibroke.com/?p=899
*/
 
var app = angular.module('myApp', []);
 
app.controller("MyCtrl", function MyCtrl($scope) {
    $scope.hours = 11;
    $scope.minutes = 45;       
});
 
 
app.directive("ngTimeSelector", function () {
    return {
        restrict: 'EA',
        template: '<div class="timeSelectorDirective"> <div class="section hours"> <div class="increase" ng-click="increaseHours()"> <i class="icon fa fa-caret-up"></i> </div> <div class="display"> {{displayHours()}} </div> <div class="decrease" ng-click="decreaseHours()"> <i class="icon fa fa-caret-down"></i> </div> </div> <div class="section minutes"> <div class="increase" ng-click="increaseMinutes()"> <i class="icon fa fa-caret-up"></i> </div> <div class="display"> {{displayMinutes()}} </div> <div class="decrease" ng-click="decreaseMinutes()"> <i class="icon fa fa-caret-down"></i> </div> </div> <div class="section hours"> <div class="increase" ng-click="switchPeriod()"> <i class="icon fa fa-caret-up"></i> </div> <div ng-if="hours >= 12" class="display"> PM </div> <div ng-if="hours < 12" class="display"> AM </div> <div class="decrease" ng-click="switchPeriod()"> <i class="icon fa fa-caret-down"></i> </div> </div> </div>',
        scope: {
            hours: "=",
            minutes: "="
        },
        replace: true,
        link: function (scope, elem, attr) {
 
            //Create vars
            scope.period = "AM";
 
            /* Increases hours by one */
            scope.increaseHours = function () {
 
                //Check whether hours have reached max
                if (scope.hours < 23) {
                    scope.hours = ++scope.hours;
                }
                else {
                    scope.hours = 0;
                }
            }
 
            /* Decreases hours by one */
            scope.decreaseHours = function () {
 
                //Check whether hours have reached min
                scope.hours = scope.hours <= 0 ? 23 : --scope.hours;
            }
 
            /* Increases minutes by one */
            scope.increaseMinutes = function () {
 
                //Check whether to reset
                if (scope.minutes >= 59) {
                    scope.minutes = 0;
                }
                else {
                    scope.minutes++;
                }
            }
 
            /* Decreases minutes by one */
            scope.decreaseMinutes = function () {
 
                //Check whether to reset
                if (scope.minutes <= 0) {
                    scope.minutes = 59;
                }
                else {
                    scope.minutes = --scope.minutes;
                }
            }
 
 
            /* Displays hours - what the user sees */
            scope.displayHours = function () {
 
                //Create vars
                var hoursToDisplay = scope.hours;
 
                //Check whether to reset etc
                if (scope.hours > 12) {
                    hoursToDisplay = scope.hours - 12;
                }                
 
                //Check for 12 AM etc
                if (hoursToDisplay == 0) {
 
                    //Set to am and display 12
                    hoursToDisplay = 12;
                }
                else {
 
                    //Check whether to prepend 0
                    if (hoursToDisplay <= 9) {
                        hoursToDisplay = "0" + hoursToDisplay;
                    }
                }
 
                return hoursToDisplay;
            }
 
            /* Displays minutes */
            scope.displayMinutes = function () {
                return scope.minutes <= 9 ? "0" + scope.minutes : scope.minutes;
            }
 
            /* Switches the current period by ammending hours */
            scope.switchPeriod = function () {
                scope.hours = scope.hours >= 12 ? scope.hours - 12 : scope.hours + 12;
            }
        }
    }
});

Styles

body{
	background-color: #F0F0F0;
	font-family: "Lato", sans-serif;
	font-weight: 300;
	color: #363636;
}
 
.timeSelectorDirective {
    background: none;
    -webkit-user-select: none;      
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.timeSelectorDirective .increase, .timeSelectorDirective .decrease{
    text-align: center;
    vertical-align: middle;    
    color: rgb(112, 112, 112);    
    text-shadow: 0px 1px #FFF;
    cursor: pointer;
    -webkit-transition: 500ms ease-out all;
    -moz-transition: 500ms ease-out all;
    -ms-transition: 500ms ease-out all;
    -o-transition: 500ms ease-out all;
    transition: 500ms ease-out all;
    font-size: 100%;
    border: 1px solid #CCC;
    padding: 3px;
    margin: 3px;
    border: 1px solid #EDE;
}
 
.timeSelectorDirective .increase:hover, .timeSelectorDirective .decrease:hover{
    color: rgba(112, 112, 112, 0.5);   
    border-color: #CCC;
    background-color: #FFF;
}
 
.timeSelectorDirective .increase:active, .timeSelectorDirective .decrease:active{
    color: rgb(112, 112, 112);
    box-shadow: inset 1px 1px 1px #DDD;
}
 
.timeSelectorDirective .section{
    display: inline-block;
}
 
.timeSelectorDirective .display{
    background-color: rgb(247, 247, 247);
    color: #555555;
    padding: 5px;
    margin: 0px 3px;
    min-width: 30px;
    text-align: center;
    border: 1px solid #DDD;
    box-shadow: 1px 1px 1px #FFFFFF;
}

Sample Usage

<div ng-app="myApp">
    <h1><a href='http://www.whatibroke.com/?p=899'>www.whatibroke.com</a></h1>
 
    <div ng-controller="MyCtrl" style="margin-top:40px;">
        <b>Hours: </b>{{hours}} &nbsp;
        <b>Minutes: </b>{{minutes}}
        <ng-time-selector hours="hours" minutes="minutes"></ng-time-selector>
    </div>
</div>

Misc Includes
AngularJS: http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js
FontAwesome: http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css
Font: http://fonts.googleapis.com/css?family=Lato:300,300italic,400,700,700italic|Rokkitt:400,700.css

Passing Parameters from a Directive to a Function – AngularJS

Hey everyone,

This is just a quick post to help out anyone who runs into the same problems with directives that I did today. I was able to call the controllers function from the directive, however none of the parameters were being passed.

The issue ended up being that the parameters need to be named. For instance:

 <ng-planner lessons="plannerLessons" lesson-clicked="editLesson(lesson)" add-lesson="newLesson()" business="true"></ng-planner>
app.directive('ngPlanner', function () {
    return {
        restrict: 'EA',
        templateUrl: '/Businesses/PlannerDirective',
        scope: {
            lessons: "=",
            business: "=",
            lessonClicked: "&",
            addLesson: "&"
        },
        replace: true,
        link: function (scope, elem, attr) {
            var selectedIndex = null;
 
            console.log(scope);
            console.log(scope.lessons);
            scope.test = function (tester) {
                selectedIndex = tester;
                console.log("Directive: " + selectedIndex);
                scope.lessonClicked({ lesson: selectedIndex });
            }
        }
    }
});
 
/* Used for handling business details, planner, etc */
app.controller("BusinessDetailsController", function ($scope) {
 
    //Fired when the new lesson button is clicked in the planner directive
    $scope.newLesson = function (date) {
        console.log("New Lesson Clicked: " + date);
    }
 
    //Fired when a lesson is clicked on
    $scope.editLesson = function (lesson) {
        console.log("Lesson Clicked: " + lesson);
    }
});

Note particularly the scope.lessonClicked line. Instead of passing parameters normally, they should be named (scope.lessonClicked({lesson: selectedIndex}).

The naming should match that used in the HTML where your directive is added:
<ng-planner lessons=”plannerLessons” lesson-clicked=”editLesson(lesson)” add-lesson=”newLesson()” business=”true”></ng-planner>

A huge thanks to Jay B for posting the solution on the AngularJS groups page: https://groups.google.com/forum/#!topic/angular/3CHdR_THaNw

He’s also added the following JSFiddle: http://jsfiddle.net/simpulton/VJ94U/

And although pretty well hidden, it is actually mentioned in the documentation: http://docs.angularjs.org/guide/directive

Select List (ng-select) – AngularJS

Hey everyone,

Just a quick post on how to do up a select list in AngularJS. This one took a bit of time to work out, particularly the display/value pairing.

HTML:

<div ng-controller="MyCtrl">
    <p>
        Status: <br />
        <select name="Status" ng-model="lesson.Status" required ng-options="status.value as status.display for status in status_options"></select>   
    </p>
</div>

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var myApp = angular.module('myApp', []);
 
function MyCtrl($scope) {
    $scope.status_options = [
            { display: 'Enabled', value: 'enabled' },
            { display: 'Disabled', value: 'disabled' },
            { display: 'Deleted', value: 'deleted' }
        ];
 
    $scope.lesson = {
        BusinessId: 0,
        Description: null,
        Duration: 0,
        Price: 0,
        ProductId: 0,
        Quantity: 0,
        Start: "/Date(-62135596800000)/",
        Status: 'enabled', //Change to null in order to remove default
        Title: null,
        Type: null
    };
}

If you’re just following along, I’ve added a quick JSFiddle: http://jsfiddle.net/rtR6e/5/

You’ll notice that in the markup, the value is actually an index. This is pretty misleading, but Angular will actually assign the appropriate value to the model (“enabled”, “disabled”, etc).

Another thing that you can do fairly easily, is to remove the default value. Simply make the status null. You can test both these by outputting the JSON or using http://jsfiddle.net/rtR6e/5/.

Check out the following StackOverflow post for more info: http://stackoverflow.com/a/13808743/522859
Or the documentation: http://docs.angularjs.org/api/ng.directive:select

Forcing a Link to Behave Normally – AngularJS

Hey everyone,

Another quick post. Working with AngularJS this morning I had a need for a link to redirect to a login page that was not contained within the “angular” part of the app. Unfortunately Angular was overriding the behavior and trying to route it.

The solution is fairly easy for this, simply add a target attribute:

 
<!-- Original -->
<a href='/account/login' alt='Sign In'>Sign In</a>
 
<!-- Solution -->
<a href='/account/login' alt='Sign In' target="_self">Sign In</a>

There are a few other solutions depending on your use case, check out the following StackOverflow post for more info: http://stackoverflow.com/a/16838013/522859

JSON Issue: This request has been blocked because sensitive information – MVC

Hey everyone,

Started redoing Learner Lessons in MVC4 and AngularJS today. I ran into this little issue while trying to retrieve JSON:

This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet

It turns out that this behavious is intentionally prevented in order to avoid JSON hijacking. Thankfully the data I’m working with is not at all sensitive so the workaround is pretty straight forward:

public ActionResult Index()
{
     return Json(db.Regions.ToList(), JsonRequestBehavior.AllowGet);
}

Source: http://stackoverflow.com/a/4616442/522859

For those of you working with sensitive data that don’t want to risk exposing it, posting is suggested as an alternative on StackOverflow: http://stackoverflow.com/a/6440163/522859