Friday, December 6, 2013

Angularjs displaying simple model data or object data in the html inside the controller:

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
<script src="http://code.angularjs.org/angular-resource-1.0.0.min.js"></script>
</head>
<body>
<h3>FIFA Mactch Summary:</h3>
<div ng-app ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="(country,goals) in items">{{country}}: {{goals}}</li>
    </ul>
</div>
<script>
var m = {
    "India": "2",
    "England": "2",
    "Brazil": "3",
    "UK": "1",
    "USA": "3",
    "Syria": "2"
};

function MyCtrl($scope) {
    $scope.items = m;
}
</script>
</body>
</html>

chk the demo:
http://jsfiddle.net/austinnoronha/4vGUL/

No comments:

Post a Comment