AngularJS事件

AngularJS事件

AngularJS Select

示例:

    
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">script>
    head>
    <body>
    <div ng-app="myApp" ng-controller="myCtrl">
    <p>选择一辆车:p>  
    <select ng-model="selectedCar" ng-options="x for (x, y) in cars">
    select>

    <h1>你选择的是: {{selectedCar.brand}}h1>
    <h2>模型: {{selectedCar.model}}h2>
    <h3>颜色: {{selectedCar.color}}h3>

    <p>注意选中的值是一个对象。p>
    div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
           $scope.cars = {
              car01 : {brand : "Ford", model : "Mustang", color : "red"},
              car02 : {brand : "Fiat", model : "500", color : "white"},
              car03 : {brand : "Volvo", model : "XC90", color : "black"}
           }
        });
    script>

    body>
    html>

AngularJS 表格

示例:

    
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">script>
    <style type="text/css">
    table, th , td  {
      border: 1px solid grey;
      border-collapse: collapse;
      padding: 5px;
    }
    table tr:nth-child(odd) {
      background-color: #f1f1f1;
    }
    table tr:nth-child(even) {
      background-color: #ffffff;
    }
    style>
    head>
    <body>
    <div ng-app="myApp" ng-controller="customersCtrl"> 
    <table>
      <tr ng-repeat="x in names">
        <td>{{ $index + 1 }}td>
        <td>{{ x.Name }}td>
        <td>{{ x.Country }}td>
      tr>
    table>
    div>

    <script>
    var app = angular.module('myApp', []);
        app.controller('customersCtrl', function($scope, $http) {
        $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
        .success(function (response) {$scope.names = response.records;});
        });
    script>

    body>
    html>

AngularJS 表单

示例:

    
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">script>
    head>
    <body>
    <div ng-app="myApp" ng-controller="formCtrl">
    <form novalidate>
        First Name:<br>
        <input type="text" ng-model="user.firstName"><br>
        Last Name:<br>
        <input type="text" ng-model="user.lastName">
        <br><br>
        <button ng-click="reset()">RESETbutton>
    form>
      <p>form = {{user }}p>
      <p>master = {{master}}p>
    div>

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

你可能感兴趣的:(Web前端设计,JavaScript)