Question

<html ng-controller='myctrl'>
    <head>Student creation</head>
    <table border=1 width="100%">
        <tr style=background-color:lightblue>
        <th>username</th>
        <th>password</th>
        <th>department</th>
        <th>action</th>
        </tr>

        <tr ng-repeat=" student in students" >
        <td>{{student.username}}</td>
        <td>{{student.password}}</td>
        <td>{{student.department}}</td>

        <td style=text-align:center> 
        <a href="/home/android/student/client/edit.html">Edit</a>&nbsp
        <a  onclick="calldeletefun()">delete</a>
        <script>
        function calldeletefun() {
            if (confirm("Do you want to delete student <<student name>>?") == true) {
                x = "you pressed ok";
            } else
                x = "you pressed cancel";
            document.getElementById("demo").innerHTML = x;
        }
        </script>
        &nbsp<a href="">marks</a>
        </td>
        </tr>
    </table>
    <p id="demo"></p>

    <head>Student Edit/Add</head>
    <br><br>
    <body style=text-align:center>
        <form role="form" ng-submit="addRow()">
            <div>Studentname:
            <input type="text" name="username" ng-model="username"  style=border-color:blue ><br><br></div>
            <div>Password:&nbsp&nbsp&nbsp
            <input type="password" name="password" ng-model="password"  style=border-color:blue><br><br></div>
            <div>Department:
            <input type="text1" name="department" ng-model="department"  style=border-color:blue><br><br></div>
            <div><input type="submit"  value="submit" style="color:white; background-color:green" >
            <input type ="submit" style="background-color:red; color:white" value="cancel"></div>
        </form>
    </body>
</html>

动态地向表中添加数据：在提交表单时，只添加了新行，但是给出的数据没有得到更新，以下是我的控制器代码

    var app = angular.module('myapp', ['ngRoute'])

    app.config(function ($routeProvider) {

        $routeProvider
        .when('/', {
            templateUrl : 'table.html'

        })
        .when('/table1',
            {
            templateUrl : 'table.html'
        })

        .otherwise({
            redirectTo : '/'
        });
    });

 app.controller('myctrl', function ($scope) {
    $scope.students = [{
            'username' : 'user1',
            'password' : 'user1',
            'department' : 'cse'
        }, {
            'username' : 'user2',
            'password' : 'user2',
            'department' : 'IT'
        }, ];

    $scope.addRow = function () {

        $scope.students.push({
            username : $scope.username,
            'password' : $scope.password,
            'department' : $scope.department
        });
        $scope.username = "";
        $scope.password = "";
        $scope.department = "";
    };

 });

这里出了什么问题？可以请调试代码。

Answer 1

将ng-app放在HTML标记中，如

<html ng-app='myapp' ng-controller='myctrl'>

从表格标签中删除ng-submit并输入ng-click =＆＃34; addRow（）＆＃34;按钮。

在控制器的addRow函数中输入false。

请告诉我这是否适合您。

由于表单已提交，即页面正在刷新，因此该行未被添加到表中。

Answer 2

查看我添加的工作代码段;问题出在你的HTML上。

也许这会对你有所帮助：

var app = angular.module('myApp', []);

app.controller('myctrl', function($scope) {
$scope.students=[{'username':'user1','password':'user1','department':'cse'},
{'username':'user2','password':'user2','department':'IT'},];


$scope.addRow=function()
{

$scope.students.push({username:$scope.username,'password':$scope.password,'department':$scope.department});
$scope.username="";
$scope.password="";
$scope.department="";
};
  

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="1" data-ng-app="myApp" data-ng-controller="myctrl">
  
<table border=1 width="100%">
<tr style=background-color:lightblue>
<th>username</th>
<th>password</th>
<th>department</th>
<th>action</th>
</tr>

<tr ng-repeat=" student in students" >
<td>{{student.username}}</td>
<td>{{student.password}}</td>
<td>{{student.department}}</td>

<td style=text-align:center> 
<a href="/home/android/student/client/edit.html">Edit</a>&nbsp
<a  onclick="calldeletefun()">delete</a>
<script>
function calldeletefun()
{
if(confirm("Do you want to delete student <<student name>>?")==true)
{
x="you pressed ok";
}
else
x="you pressed cancel";
document.getElementById("demo").innerHTML=x;
}
</script>
&nbsp<a href="">marks</a>
</td>
</tr>
</table>
<p id="demo"></p>
<h3>Student Edit/Add</h3>
<form role="form" ng-submit="addRow()">
<div>Studentname:
<input type="text" name="username" ng-model="username"  style=border-color:blue ><br><br></div>
<div>Password:&nbsp&nbsp&nbsp
<input type="password" name="password" ng-model="password"  style=border-color:blue><br><br></div>
<div>Department:
<input type="text1" name="department" ng-model="department"  style=border-color:blue><br><br></div>
<div><input type="submit"  value="submit" style="color:white; background-color:green" >
<input type ="submit" style="background-color:red; color:white" value="cancel"></div>
</form>
</div>

动态地向表中添加数据：更新的数据不会仅反映添加的行

2 个答案: