ng-app
在裡面才能用angularjs
ng-model
在input 輸入的地方 值會給ng-bind 或是使用="值" 給 {{ 值}}
ng-bind
產出的地方 接收ng-model
ng-init
angularjs的變數放的地方 可以給其他
例如
ng-bind {{}} ng-model value
像是var 可以是任何東西
ata-ng-init
data-ng-bind
ng-app vs data-ng-app
ng-app="myApp"
ng-controller="myCtrl"> 宣告controller
<script>
宣告一個function 給 app
var app=angular.module("名字",[]);
控制controller
app.controller("controller的名字",fuction($scope){
$scope.firsname="###"; 宣告 controller的變數的值是多少
});
</script>
可以直接取名字使用
<div ng-app="pp" -test-directiv></div>
<script>
var app = angular.module("pp", []);
app.directive("TestDirectiv", function() {
return {
template : "I s made in a directive constructor!"
};
});
</script>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway',alien:'ton'},
{name:'Hege',country:'Sweden',alien:'lee'},
{name:'Kai',country:'Denmark',alien:'hey'}]">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country+','+x.alien }}</li>
</ul>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>
The
ng-model directive adds/removes the following classes, according to the status of the form field:- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
All applications have a
$rootScope which is the scope created on the HTML element that contains the ng-app directive.
The rootScope is available in the entire application.
If a variable has the same name in both the current scope and in the rootScope, the application use the one in the current scope.
AngularJS Filters
AngularJS provides filters to transform data:
currencyFormat a number to a currency format.dateFormat a date to a specified format.filterSelect a subset of items from an array.jsonFormat an object to a JSON string.limitToLimits an array/string, into a specified number of elements/characters.lowercaseFormat a string to lower case.numberFormat a number to a string.orderByOrders an array by an expression.uppercaseFormat a string to upper case.- <div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
<p ng-show="false">I am not visible.</p>
<p ng-show="hour > 12">I am visible.</p>
ng-blurng-changeng-clickng-copyng-cutng-dblclickng-focusng-keydownng-keypressng-keyupng-mousedownng-mouseenterng-mouseleaveng-mousemoveng-mouseoverng-mouseupng-paste
form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
<form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="/w3css/4/w3.css">
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
</script>
<div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="w3-card-2 w3-margin" style="max-width:400px;">
<header class="w3-container w3-light-grey w3-padding-16">
<h3>My Shopping List</h3>
</header>
<ul class="w3-ul">
<li ng-repeat="x in products" class="w3-padding-16">{{x}}<span ng-click="removeItem($index)" style="cursor:pointer;" class="w3-right w3-margin-right">×</span></li>
</ul>
<div class="w3-container w3-light-grey w3-padding-16">
<div class="w3-row w3-margin-top">
<div class="w3-col s10">
<input placeholder="Add shopping items here" ng-model="addMe" class="w3-input w3-border w3-padding">
</div>
<div class="w3-col s2">
<button ng-click="addItem()" class="w3-btn w3-padding w3-green">Add</button>
</div>
</div>
<p class="w3-text-red">{{errortext}}</p>
</div>
</div>
</body>
</html>
http://code-beginner.logdown.com/posts/307101-start-angularjs-theme-wonderful-tap-ng-click
