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

<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 ='已拒绝'">

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

    </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>

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

猜你喜欢