AngularJS - Basic

$scope vs controller as

by Ryan Morris

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container" ng-app="myScopeApp">
    
    <div ng-controller="MainCtrl">
        
        <h1>Working with sets of data</h1>
        
        <!-- 1) ng-repeat directive -->
        <div ng-repeat="name in data" ng-class="name.fancy ? 'fancy' : 'notfancy'">
            
            <p>{{ name.name }} (<span ng-bind="name.id"></span>)</p>
            
        </div>
        
        <!-- 2) ng-repeat over an object -->
        <!--
        <dl ng-repeat="(key, val) in data.0">
            <dt>{{key}}</dt>
            <dd>{{val}}</dd>
        </dl>
        -->
        
        <!-- 3) ng-repeat-start across a swath of elements
        <div ng-repeat-start="name in data" ng-class="name.fancy ? 'fancy' : 'notfancy'">
            
            <p>{{ name.name }} (<span ng-bind="name.id"></span>)</p>
            
        </div>
        
        <div ng-repeat-end></div>
        -->
        
        <form name="changeData" ng-submit="submitChange()">
            <input type="submit" value="Change this data!"/>
        </form>
        
    </div> 
    
</div>

CSS

div[ng-controller] {
    border: 1px solid #ccc;
    border-radius:5px;
    margin:5px 0;
    padding:5px;
}

div[ng-controller] > div[ng-controller] {
    background-color:#f0f0f0;
}

JavaScript

/**
 * $scope App
 */
var myScopeApp = angular.module('myScopeApp', []);

myScopeApp.controller('MainCtrl', ['$scope', function($scope) {
    
    $scope.data = [
        {
            id: 1,
            name: "Ryan Morris",
            fancy: true
        },
        {
            id: 2,
            name: "Tony Danza",
            fancy: false
        },
        {
            id: 3,
            name: "Jane Jones",
            fancy: true
        }
    ];
    
    $scope.submitChange = function() {
        
        /*// We can completely change data and repeat will handle it
        $scope.data = [
            {
                id: 44,
                name: "Jim Belushi",
                fancy: true
            },
            {
                id: 2,
                name: "Maggie Simpson",
                fancy: false
            }            
        ];/**/
        
        console.log("Submitting");
    }
    
}]);