First AngularJS !

浏览数：31 / 时间：2015年06月09日

My first angular!

<html ng-app>
<head>
    <meta charset="utf-8">
    <script src="angular.js"></script>
    <script src="controllers.js"></script>
    <style>
        .selected {
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div ng-controller=‘HelloController‘>
        <input ng-model=‘greeting.text‘ />
        <p>{{greeting.text}}, World</p>
    </div>
    <div ng-controller="CartController">
        <div ng-repeat=‘item in items‘>
            <span>{{item.title}}</span>
            <input ng-model=‘item.quantity‘>
            <span>{{item.price | currency}}</span>
            <span>{{item.price * item.quantity | currency}}</span>
            <button ng-click="remove($index)">Remove</button>
        </div>
    </div>
    <form ng-controller="fundingController">
    Starting: <input ng-change="computeNeeded()"
    ng-model="funding.startingEstimate">
    Recommendation: {{needed}}
    <input ng-model="funding.me">
    </form>
     ng-change  ng-submit 就像事件处理函数一样
    <form ng-submit="requestFunding()" ng-controller="StartUpController">
        Starting:
        <input ng-change="computeNeeded()" ng-model="startingEstimate">Recommendation: {{needed}}
        <button>Fund my startup!</button>
        <button ng-click="reset()">Reset</button>
    </form>

    <div ng-controller=‘DeathrayMenuController‘>
        <button ng-click=‘toggleMenu()‘>Toggle Menu</button>
        <ul ng-show=‘menuState.show‘>
        <li ng-click=‘stun()‘>Stun</li>
        <li ng-click=‘disintegrate()‘>Disintegrate</li>
        <li ng-click=‘erase()‘>Erase from history</li>
        </ul>
    <div/>
    ng-showW为false相当于display none

<table ng-controller=‘RestaurantTableController‘>
    <tr ng-repeat=‘restaurant in directory‘ ng-click=‘selectRestaurant($index)‘ ng-class=‘{selected: $index==selectedRow}‘>
        <td>{{restaurant.name}}</td>
        <td>{{restaurant.cuisine}}</td>
    </tr>
</table>

</body>
</html>

function HelloController($scope) {
    $scope.greeting = {
        text: ‘Hello‘
    };
    console.log($scope.greeting.text);
}

function CartController($scope) {
    $scope.items = [{
        title: ‘Paint pots‘,
        quantity: 8,
        price: 3.95
    }, {
        title: ‘Polka dots‘,
        quantity: 17,
        price: 12.95
    }, {
        title: ‘Pebbles‘,
        quantity: 5,
        price: 6.95
    }];
    $scope.remove = function(index) {
        $scope.items.splice(index, 1);
    }
}

function fundingController($scope) {
    $scope.funding = {
        startingEstimate: 0
    };
    $scope.computeNeeded = function() {
        $scope.needed = $scope.funding.startingEstimate * 10;
    };
    computeMe = function(){
        console.log(‘me change‘);
    }
    $scope.$watch(‘funding.me‘,computeMe);
}


function StartUpController($scope) {
    $scope.computeNeeded = function() {
        $scope.needed = $scope.startingEstimate * 10;
    };
    $scope.requestFunding = function() {
        window.alert("Sorry, please get more customers first."+$scope.needed);
    };
    $scope.reset = function(){
        $scope.needed = $scope.startingEstimate =0;
        alert($scope.startingEstimate);
    }
}

function DeathrayMenuController($scope) {
    //$scope.menuState.show = false;//这样直接写会报错 提示$scope.menuState undefined
    //可以这样
    //$scope.menuState = {};
    //$scope.menuState.show = false;
    //不过最好还是用这样的方式
    $scope.menuState ={
        show: false
    };
    $scope.toggleMenu = function() {
        $scope.menuState.show = !$scope.menuState.show;
    };
}

function RestaurantTableController($scope){
    $scope.directory = [{name:"The Handsome Heifer", cuisine:"BBQ"},{name:"Green‘s Green Greens", cuisine:"Salads"},{name:"House of Fine Fish", cuisine:"Seafood"}];
    $scope.selectRestaurant = function($selecteIndex){
        $scope.selectedRow = $selecteIndex;
        console.log($selecteIndex);
    }
}