Question

起初我得到了数据，但是在发布一些新学生之后，我希望数组更新并更新，但是表格没有，我也不知道为什么。它假设是这样或什么？< / p>

这是html

<!DOCTYPE html>
<html lang="en" ng-app="ang">
    <head>
        <meta charset="utf-8" />
        <link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
        <title>Angular Practice </title>
        <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
        <style>
            div{
                overflow:auto;
                margin:5px;
            }
        </style>
    </head>
    <body ng-controller="TableController as bc">
        <div style="margin:5px auto;width:810px">
        <div style="width:250px;float:left;">
        <form name="forma" novalidate ng-submit="forma.$valid&&bc.sendmes()">
        <table class="table table-responsive table-hover">
            <tr>
            <th colspan="2">Add a new Student</th>
            </tr>
            <tr>
            <td>Name</td>
            <td><input type="text" ng-model="bc.telebe.name" class="input-sm" required /></td>
            </tr>
            <tr>
            <td>Surname</td>
            <td><input type="text" ng-model="bc.telebe.surname" class="input-sm" required /></td>
            </tr>
            <tr>
            <td>Age</td>
            <td><input type="number" ng-model="bc.telebe.age" class="input-sm" required /></td>
            </tr>
            <tr>
            <th colspan="2"><input type="submit" value="Submit" class="btn-sm" /></th>
            </tr>
        </table>
        </form>
        </div>
        <div style="width:550px;">
            <table ng-controller="TableController as bc" class="table table-responsive table-striped table-bordered table-hover">
                <tr>
                    <th>Name</th>
                    <th>Surname</th>
                    <th>Age</th>
                </tr>
                <tr ng-repeat="telebe in bc.telebeler">
                    <td>{{telebe.name}}</td>
                    <td>{{telebe.surname}}</td>
                    <td>{{telebe.age}}</td>
                </tr>
            </table>
        </div>
        </div>
    </body>
</html>

这是app.js

app=angular.module("ang",[ ]);
    app.controller("TableController",function($http){
        var bu = this;
        this.telebe = {}
        bu.telebeler = [ ];
        $http.get("getjson.php").success(function(data){
            bu.telebeler = data;
        });
        this.sendmes=function(){
            $http.post("getjson.php",this.telebe).success(function(data){
                bu.telebeler = data;
                console.log(bu.telebeler);
                bu.telebe = {};
            }); 
        };
});

这是getjson.php，这个文件显然没有php的问题

<?php
    require("config.php");
    header("Content-type:text/json");

    if($s = file_get_contents("php://input")){
        $ar=json_decode($s,true);
        $name = htmlspecialchars($ar['name']);
        $surname = htmlspecialchars($ar['surname']);
        $age = htmlspecialchars($ar['age']);
        mysql_query("INSERT INTO telebe(name,surname,age) VALUES('$name','$surname','$age')");
    };

    $tema = mysql_query("SELECT * FROM telebe");
    $array = array();
    while($sira = mysql_fetch_assoc($tema))$array[]=$sira;
    echo json_encode($array);
?>

Answer 1

您应该将$scope插入控制器并定义对象以便在示波器上查看，而不是在控制器上：

app.controller("TableController",function($scope, $http){
    $scope.telebe = {};
    $scope.telebeler = [];

    ...
}

然后在html中你应该指向这样的范围：

<tr ng-repeat="t in telebeler">

这应该有效。

Answer 2

从ng-controller="TableController as bc"标记中删除table指令。控制器已在body中定义。

目前，您有两个具有不同范围的控制器，每个控制器都发送自己的HTTP请求以获取初始数据。更改数据时，只更新外部控制器，但是您正在从内部控制器读取它们。删除内部控制器将解决问题。

更改值后，ng-repeat不会重复

2 个答案: