2017年10月17日 星期二

Angular筆記




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>





<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>


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:
  • currency Format a number to a currency format.
  • date Format a date to a specified format.
  • filter Select a subset of items from an array.
  • json Format an object to a JSON string.
  • limitTo Limits an array/string, into a specified number of elements/characters.
  • lowercase Format a string to lower case.
  • number Format a number to a string.
  • orderBy Orders an array by an expression.
  • uppercase Format 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>

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste
form>
    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>
<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>



<!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
張貼者： 於

1 則留言:

  1. Tejuteju2018年8月7日 凌晨1:58

    It is nice blog Thank you provide important information and i am searching for same information to save my time AngularJS Online Training Hyderabad

    回覆刪除

訂閱： 張貼留言 (Atom)