`
ning_wenchao
  • 浏览: 2642 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Anggular 框架做的小案例-邀请案例

框架JavaScript 
阅读更多

<body ng-app="n1.app">

<div ng-controller="Mathcontroller">
    人员姓名:<input type="text" ng-model="data.name" id = "txtone">
    电话号码:<input type="text" ng-model="data.phone" id = "txttwo">
    <button ng-click="obj.fn()">添加</button>

    <table border='1'  cellspacing='0'>
    <tr>
        <th>姓名</th>
        <th>电话号</th>
        <th>邀请状态</th>
        <th width="200px">按钮</th>

    </tr>
    <tr ng-repeat="user in data">
        <td ng-bind="user.name"></td>
        <td>{{user.phone}}</td>
        <td>{{user.state}}</td>
        <td>
            <span ng-if = 'user.state =="邀请中"' >
                  <input type="button" value="接受邀请" ng-click = "user.state ='已接受'">
                  <input type="button" value="拒绝邀请" ng-click = "user.state ='已拒绝'">

                <!--<button ng></button>-->
            </span>
            <!--<span ng-if="user !==''">-->
                   <input type="button" value="删除" ng-click="data.splice($index,1)"></td>
            <!--</span>-->

    </tr>
    </table>
</div>




<script src="angular.js"></script>
<script>

    var data = [
        {name:'张三',phone:'18612345673',state:'邀请中'},
        {name:'李四',phone:'18612345674',state:'已接受'},
        {name:'王五',phone:'18612345675',state:'邀请中'},
        {name:'赵六',phone:'18612345676',state:'已拒绝'},
    ];


    var app = angular.module("n1.app",[]);
    app.controller("Mathcontroller",function($scope){
        $scope['data'] = data;
        $scope['obj'] = {
            fn: function () {
                var t1 = document.getElementById("txtone");
                var t2 =  document.getElementById("txttwo");
                data.push({name:t1.value,phone:t2.value,state:"邀请中"});
                t1.value = "";
                t2.value = "";
            }
        }
    });


</script>
分享到：
canvas封装 FlappyBird ：小鸟第一步鼠标 ...
评论
1 楼 Cobain_LI 2016-08-28  
感觉angular里面使用DOM操作有点不合适啊，可以将姓名与电话号的输入用form包起来,再给一个ng-submit,将data.name和data.phone传进submit的函数里，可以这样来避免使用DOM，我没有测试，但应该是可以的
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics