Created by Pierre Zemb / @PierreZ
I'm just a student!
Create a Web-based app to show students with AngularJS
Enable Angular
index.html
<html lang="en" ng-app='studentApp'>
...
<body ng-controller='Ctrl'>
app.js
var myApp = angular.module('studentApp', []);
myApp.controller('Ctrl', function () {
});
Try the double data binding
index.html
<div class="col-lg-4 student">
<span class="glyphicon glyphicon-remove"></span>
<h2>{{qwerty.name}}</h2>
<p>{{qwerty.class}}</p>
<p>{{qwerty.text}}</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
app.js
var myApp = angular.module('studentApp', []);
myApp.controller('Ctrl', function ($scope) {
$scope.student = {
"name": "Pierre Zemb",
"class" : "CIR3" ,
"text" : "Seems like a nice guy"
}
});
What about more students?
app.js
$scope.students = new Array();
$scope.students.push({
"name": "Pierre Zemb",
"class" : "CIR3" ,
"text" : "Seems like a nice guy"
});
$scope.students.push({
"name": "Brendan",
"class" : "CIR1" ,
"text" : "Seems like a weird guy"
});
index.html
<div class="col-lg-4 student" ng-repeat="student in students">
What about searching?
index.html
</ul>
<div class="row">
<input class="search-query" type="text" ng-model="search"
placeholder="Search a student"></div>
</div>
...
<div class="col-lg-4 student"
ng-repeat="student in students | filter:search-query">
Remove a student
index.html
<span ng-click="remove(student.name)"
class="glyphicon glyphicon-remove"></span>
app.js
$scope.remove = function (name){
angular.forEach($scope.students, function(student,key) {
if (student.name==name) {
$scope.students.splice(key,1);
};
});
};
Add a student
app.js
$scope.addStudent = function (){
$scope.students.push($scope.new_student);
};
index.html
<input type="text" name="nom" id="nom" ng-model="new_student.name"/>
<input type="class" name="class" id="class" ng-model="new_student.class"/>
<input type="text" name="text" id="text" ng-model="new_student.text"/>
<button type="button" class="btn btn-default navbar-btn"
ng-click="addStudent()">Add</button>
What about tabs?
index.html
<ul class="nav nav-tabs">
<li ng-class="{active: class == selected}"
ng-repeat="class in classes"
ng-click="setSelected(class)"><a href="#">{{class}}</a></li>
</ul>
...
<div ng-if="student.class == selected || selected == 'All' "
class="col-lg-4 student"
ng-repeat="student in students | filter:search | orderBy:'class'">
app.js
$scope.classes = new Array();
$scope.classes.push("All");
$scope.setSelected = function (select){
$scope.selected = select;
}