Sample AngularJS app using controller

Developer
Victor Yan
Size
2,294 Kb
Views
8,096
  1. Sample AngularJS app using controller Previews
  2. Sample AngularJS app using controller HTML Codes
  3. Sample AngularJS app using controller JS Codes

How do I make an sample angularjs app using controller?

What is a sample angularjs app using controller? How do you make a sample angularjs app using controller? This script and codes were developed by Victor Yan on 05 January 2023, Thursday.

Sample AngularJS app using controller Previews
IQ Test

Sample AngularJS app using controller - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sample AngularJS app using controller</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
</head>
<body> <html ng-app>
<body ng-controller="ctrl"> <div class="container"> <h2>Sample AngularJS app using controller <h3>{{rows.length}} Friend{{plural(rows)}} <span ng-show="temp">?<small class="muted"><em > (only {{rows.length-1}} actually....)</em></small></span></h3> <form class="form-horizontal"> <span ng-class="{'input-append':addName}"> <input id="add" type="text" placeholder="Another one ?" ng-model="addName" ng-change="addTemp()"/> <input type="submit" class="btn btn-primary" ng-click="addRow()" ng-show="addName" value="+ add"/> </span> <span class="search input-prepend" ng-class="{'input-append':search}"> <span class="add-on"><i class="icon-search"></i></span> <input type="text" class="span2" placeholder="Search" ng-model="search"> <button type="submit" class="btn btn-inverse" ng-click="search=''" ng-show="search" value="+ add">Clear</button>
</span> </form> <table class="table table-striped"> <tr ng-repeat="row in rows | filter : search" ng-class="{'muted':isTemp($index)}"> <td>{{$index+1}}</td> <td>{{row}}</td> <td> <button class="btn btn-danger btn-mini" ng-click="deleteRow(row)" ng-hide="isTemp($index)">Delete</button> </td> </tr> </table> <div style="margin-top: 20px;">Provided by <a onclick="window.open('https://www.tipsoftheday.com.au')">Tips of the day</a></div> </div>
</body>
</html> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sample AngularJS app using controller - Script Codes JS Codes

function ctrl($scope){ $scope.rows = ['Paul','John','Lucie']; $scope.temp = false; $scope.addRow = function(){ $scope.temp = false; $scope.addName=""; }; $scope.deleteRow = function(row){ $scope.rows.splice($scope.rows.indexOf(row),1); }; $scope.plural = function (tab){ return tab.length > 1 ? 's': ''; }; $scope.addTemp = function(){ if($scope.temp) $scope.rows.pop(); else if($scope.addName) $scope.temp = true; if($scope.addName) $scope.rows.push($scope.addName); else $scope.temp = false; }; $scope.isTemp = function(i){ return i==$scope.rows.length-1 && $scope.temp; };
}
Sample AngularJS app using controller - Script Codes
Sample AngularJS app using controller - Script Codes
Home Page Home
Developer Victor Yan
Username tipsoftheday
Uploaded January 05, 2023
Rating 3
Size 2,294 Kb
Views 8,096
Do you need developer help for Sample AngularJS app using controller?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Victor Yan (tipsoftheday) Script Codes
Name
Disable And Enable Input Elements In A Div Block Using jQuery
Make element focusable using tabindex
Using Javascript to calculate age
Bootstrap 3 navbar
TodoMVC using AngularJS
HTML 5 Canvas Example
HTML 5 Session Storage Example
Detect Enter Key Pressed Using jQuery event
QUnit example to verify calculate age function
Create inline help tips for your site with a bit of CSS
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!