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

最新推荐文章于 2023-10-16 21:27:14 发布

iteye_9274

最新推荐文章于 2023-10-16 21:27:14 发布

阅读量342

点赞数

文章标签：框架 JavaScript ViewUI

本文链接：https://blog.csdn.net/iteye_9274/article/details/82672408

版权

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