Category Archives: AngularJS

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:

Status:

JavaScript:

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

Advertisements

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:



Sign In


Sign In

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

ng-class with ng-repeat – AngularJS

Hey everyone,

Just another quick AngularJS post. This one is for using ng-class with ng-repeat. The goal here is to have a class applied to the non-selected elements. To start with, we’ll chuck the following in our controller:

$scope.transmission = {
selected: null,
options: [
{
name: 'Any'
},			
{	
name: 'Manual'
},			
{
name: 'Automatic'
}			
]
};

Here we’re just creating a few random objects. To keep things simple we’re going with transmission types: a manual car, automatic or any. Next you’ll want to add the markup:

...
{{option.name}}
...

Finally the class to be applied:

.line-through{
	text-decoration: line-through;
}

Creating a ‘Starts With’ Filter in AngularJs

Hey everyone,

Just a quick post on how to create a simply custom filter in AngularJS. We’ll be using the same regions objects as the other day:

{
	"regions": [
		{
			"id": "1",
			"postcode": "4700",
			"name": "Rockhampton",
			"description": "One of the major cities in Central Queensland."
		},
		{
			"id": "16",
			"postcode": "4214",
			"name": "Keppel Island",
			"description": "Awesome islands, very few people, heaps of fish beautiful clear water."
		}
	]
}

We’ll create the filter like so:

app.filter('regionsWithPostcode', function(){
	return function(regions, postcode){

		//Create vars
		var matching_regions = [];		

		//Check if input matches current postcode
		if(regions && postcode){		 	
		 	
		 	//Loop through each region
			for(var i = 0; i < regions.length; i++){
				if(regions[i].postcode.substr(0, postcode.length) == postcode){
					matching_regions.push(regions[i]);
				}
			}

			//Return matching regions
			return matching_regions;
		}
		else{
			return regions;
		}		
	}
});

And finally, we’ll setup the HTML as follows:

	
Use Postcode
{{region.name}}

Filter by Object Property in Ng-Repeat – AngularJS

Hey everyone,

Just a quick post on how to filter by a property when using ng-repeat. To start with, we’ll use the following objects:

{
	"regions": [
		{
			"id": "1",
			"postcode": "4700",
			"name": "Rockhampton",
			"description": "One of the major cities in Central Queensland."
		},
		{
			"id": "16",
			"postcode": "4214",
			"name": "Keppel Island",
			"description": "Awesome islands, very few people, heaps of fish beautiful clear water."
		}
	]
}

Then assuming you want to filter by the postcode all you need is the following:

Region

{{region.name}}

AngularJS ngAnimate Transitions – Basic Demo

Hey everyone,

I’ve just starting using Angular and went to do a few animations. I had a bit of trouble trying to find anywhere that mentioned what each class does. This is the demo we’ll be making, it’s pretty basic but hopefully enough to get you started: JSFiddle Demo

Dummy Page
To start with, just create a new page with the following. Note that none of the stuff below applies to the animation itself, this is just so that we’ve got something to work with.


	
		Test Animation
		
	
	
		
Add
{{person.name}}
//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js //Initialisation stuff, note that you don't need any of this for animations, just using it so there's something to see function PeopleController($scope){ $scope.name = ""; $scope.people = [ { name: "Santa Clause"}, { name: "Easter Bunny"}, { name: "Tooth Fairy"}, { name: "Chris Owens"}, { name: "Phillip Farnsworth"}, { name: "Clark Kent"}, { name: "Lana Lang"} ]; $scope.removePerson = function(row){ $scope.people.splice(row, 1); } $scope.addPerson = function(){ $scope.people.push({name: $scope.name}); $scope.name = ""; } }

Adding the ng-animate Directive
The first step to adding the transitions is to add the ng-animate directive:

{{person.name}}

Classes for Adding a New Element
Now we’re going to add the styles that are used when a new element is added to the page. To start with, you’ll want to create .person-enter. This is the class that will be animated from. In this instance we want new elements to start off invisible so we’ll set the opacity to 0.

.person-enter{
	-webkit-transition: 1s linear all;
	-moz-transition: 1s linear all;
	-ms-transition: 1s linear all;
	-o-transition: 1s linear all;
	transition: 1s linear all;
	opacity: 0;
}

Next we’ll want to add the styles for .person-enter.person-enter-active. These will be the styles that we want to animate to. Because we’re going from invisible to visible we’ll adjust the opacity:

.person-enter.person-enter-active{
	opacity: 1;
}

Classes for Removing an Element
Now we’ll add the class to animate from. This will the opposite of what we used when adding an element – start visible, go to invisble:

.person-leave{
	-webkit-transition: 1s linear all;
	-moz-transition: 1s linear all;
	-ms-transition: 1s linear all;
	-o-transition: 1s linear all;
	transition: 1s linear all;
	opacity: 1;
}

And finally the class to animate to when an element is removed:

.person-leave.person-leave-active{
	opacity: 0;
}

All Together Now
Finally we can put the whole thing together. The people boxes should now fade out and in whenever an element is added or removed. You can see it in action here: JSFiddle Demo


	
		Test Animation
		

		
			.person{
				padding: 20px;
				width: 50px;
				height: 50px;
				background-color: #E8FCE4;
				border: 1px solid #C0E2BB;
				float: left;
				margin: 5px;
				text-align: center;
				box-shadow: 2px 2px 2px #DAD3D3;
				text-shadow: 0px -1px 1px #FFF;
				cursor: pointer;
			}


			/*
				Note: you can condense these, however they've been split to make the explanation a little easier to follow;
			*/

			/* This is the class that will be animated *FROM* when a new person is added */
			.person-enter{
				-webkit-transition: 1s linear all;
				-moz-transition: 1s linear all;
				-ms-transition: 1s linear all;
				-o-transition: 1s linear all;
				transition: 1s linear all;
				opacity: 0;
			}

			/* This is the class that will be animated *TO* when a new person is added */
			.person-enter.person-enter-active{
				opacity: 1;
			}


			/* This is the class that will be animated *FROM* when a person is removed */
			.person-leave{
				-webkit-transition: 1s linear all;
				-moz-transition: 1s linear all;
				-ms-transition: 1s linear all;
				-o-transition: 1s linear all;
				transition: 1s linear all;
				opacity: 1;
			}

			/* This is the class that will be animated *TO* when a person is removed */
			.person-leave.person-leave-active{
				opacity: 0;
			}


		
	
	
		
Add
{{person.name}}
//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js //Initialisation stuff, note that you don't need any of this for animations, just using it so there's something to see function PeopleController($scope){ $scope.name = ""; $scope.people = [ { name: "Santa Clause"}, { name: "Easter Bunny"}, { name: "Tooth Fairy"}, { name: "Chris Owens"}, { name: "Phillip Farnsworth"}, { name: "Clark Kent"}, { name: "Lana Lang"} ]; $scope.removePerson = function(row){ $scope.people.splice(row, 1); } $scope.addPerson = function(){ $scope.people.push({name: $scope.name}); $scope.name = ""; } }

Problems
If you’re having issues, one of the first things to check is that you’re on the right version of angular. There have been a lot of changes and many of the styles used in one this version don’t seem to work in the older ones. If there’s anything else that’s not working let me know!

Where to From Here?
There’s heaps more that nganimate can do, make sure you checkout http://www.nganimate.org/.