AngularJS对于行程管理的小例子简单使用

来源：互联网发布：充油卡便宜的软件编辑：程序博客网时间：2024/05/22 10:24

下面我事我做一个叫行程管理的时候用到的一点东西希望对读者有帮助

上面及时实现的一个小效果，项目太大，只是简单说说，如果基础不好的呢，就希望去菜鸟网上看看基础再来：

<!DOCTYPE html><html lang="en" ng-app="myApp"><head>    <meta charset="UTF-8">    <title>行程列表</title>    <link href="../css/bootstrap.css" rel="stylesheet"/>    <style>        .style1 {            color: blue        }        .style2 {            color: red        }        .style3 {            color: pink        }    </style></head><body><div class="container" ng-controller="listCtrl">    <h1>{{roles.user}}的行程表</h1>    <input type="text" value="" name="in" class="input-sm" ng-model="newitem"/>    <button class="btn btn-default" ng-click="add(newitem)">添加行程</button>    <table class="table table-striped">        <thead >        <th>地点</th>        <th>完成</th>        </thead>        <tbody>        <tr ng-repeat="n in roles.item ">            <td>{{n.address}}</td>            <td ng-class="n.time ? 'style1': 'style2'">                <span ng-hide="!n.time">已完成</span>                <span ng-hide="n.time">未完成</span>            </td>        </tr>        </tbody>    </table></div><script src="../js/angular.min.js"></script><script>    var data = {        user: "小明",        item: [            {address: "北京", time: true},            {address: "上海", time: false},            {address: "广州", time: true},            {address: "郑州", time: false}        ]    }    var app = angular.module("myApp", []);    app.controller("listCtrl", function ($scope) {        $scope.roles = data;        $scope.mycss = {            style1: "style1",            style2: "style2",            style3: "style3"        }        $scope.newitem="";        $scope.add= function (newItem) {            var str=$scope.newitem;            if (str!=""){            $scope.roles.item.push({address:newItem,time:false});            $scope.newitem="";            }else {                alert("内容不能为空");            }        }    })</script></body></html>

上面用到的是bootstrap和anjs的结合使用，简单实现的这个东西，

0 0