angularjs学习笔记（1）

最新推荐文章于 2016-11-14 16:09:44 发布

五年丶

最新推荐文章于 2016-11-14 16:09:44 发布

阅读量245

点赞数

分类专栏：学习笔记文章标签： angularjs

本文链接：https://blog.csdn.net/dengboz0910/article/details/53018717

版权

学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

目录结构


<html>
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <title>混合多选</title>
    <link rel="stylesheet" href="css/angular-csp.css"/>

</head>
<body>
{{'第一个，数据的双向banding'}}
<div>
    <!--{{"第一个"}}-->
    <!--<form>-->
    <!--Starting: <input-->
    <!--ng-model="funding.startingEstimate">-->
    <!--Recommendation: {{funding.needed}}  -->
    <!--</form>-->
</div>
<br>
<!--第二个-->{{'第二个，数据的双向绑定的延伸及方法调用'}}
<div>
    <form ng-controller="second">
        Starting: <input  ng-model="startingEstimate">
        Recommendation: {{needed}}
        <button ng-click="computeNeeded()">Fund my startup!</button>
    </form>
</div>
<br>
<!--第三个-->{{'第三个，ng-repeat示例，及其插入Insert'}}
<div>
    <ul ng-controller='third'>
        <li ng-repeat='student in students'>
            <a href='/student/view/{{student.id}}'>{{student.name}}</a>
        </li>
    </ul>
    <button ng-click="insertTom()">Insert</button>
</div>
<br>
<!--第四个-->{{'第四个，表格序号自动生成问题'}}
<div>
    <table ng-controller='fourth'>
        <tr ng-repeat='track in album'>
            <td>{{$index + 1}}</td>
            <td>{{track.name}}</td>
            <td>{{track.duration}}</td>
        </tr>
    </table>
</div>
<br>
{{'第五个，ng-show 元素的显示和隐藏'}}
<br>
<div ng-controller='fifth'>
    <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>
<script src="js/angular.js"></script>
<script src="js/ctrl.js"></script>

</body>
</html>

js:
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope){
//    $scope.funding = { startingEstimate: 0 };
//    $scope.computeNeeded = function() {
//        $scope.funding.needed = $scope.funding.startingEstimate * 10;
//    };
});

app.controller('second',function($scope){
    $scope.computeNeeded = function() {
        $scope.needed = $scope.startingEstimate * 10;
    };
    $scope.requestFunding = function() {
        window.alert("Sorry, please get more customers first.");
    };
});

app.controller('third',function($scope){

    var students = [{name:'Mary Contrary', id:'1'},
        {name:'Jack Sprat', id:'2'},
        {name:'Jill Hill', id:'3'}];

        $scope.students = students;

        $scope.insertTom = function () {
            $scope.students.splice(1,1, {name:'Tom Thumb', id:'4'});
        };

});
app.controller('fourth',function($scope){
    var album = [{name:'Southwest Serenade', duration: '2:34'},
        {name:'Northern Light Waltz', duration: '3:21'},
        {name:'Eastern Tango', duration: '17:45'}];

        $scope.album = album;

});
app.controller('fifth',function($scope){
    $scope.menuState={'show':false};
    $scope.toggleMenu = function() {
        $scope.menuState.show = !$scope.menuState.show;

        }
});

五年丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs学习笔记（1）

<html><!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8"> <title>混合多选</title> <link rel="stylesheet" href="css/angular-csp.css"/></head><body>{{'第一个，数据的双向bandin
复制链接

扫一扫