Question

我试图在<p>中查看发送给函数cronSave(user_id,script_id,cron_format)的值。问题是cron_format是一个<contenteditable>属性，该函数只显示未初始化表的值而不进行更改。这是表：

<p id="demo">Display data here</p>

<main>
    <table class="table table-bordered table-hover" ng-controller="tableCtrl">
        <thead>
        <th>user name</th>
        <th>script name</th>
        <th>cron format<span class="glyphicon glyphicon-question-sign"></span></th>
        </thead>
        <tbody>
            <tr ng-repeat="row in data">
                <td class="userName">{{row.user_id}}</td>
                <td class="scriptName">{{row.script_id}}</td>
                <td class="cronFormat"><span contenteditable="true" ng-repeat="l in letters(row.cron_format) track by $index">{{l}}</span><button class="save"  ng-click="saveCron(user_id,script_id,cron_format)">save</button></td>
        </tbody>
    </table>
</main>

这是JS：

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

//Table Controller
app.controller('tableCtrl',function($scope) {
$scope.data = [
      {user_id: "1", script_id: "s12", cron_format: "*/2 * * 5 *"},
      {user_id: "2", script_id: "s34", cron_format: "*/5 * * * *"},
      {user_id: "3", script_id: "s54", cron_format: "*/4 * 7 * *"},
    {user_id: "4", script_id: "s234", cron_format:  "*/6 * * * *" }
    ];
    //parse cron_format and edit each digit individually
    $scope.letters = function(row.cron_format){
        return cron_format.split(" ");
    }
    //save cron changes if exits / create if doesn't

    $scope.saveCron = function(userId,scriptId,cronFormat){
        $.post("updateCronChange.php","user_id=userId&script_id=scriptId&cron=cronFormat", function(data){
            document.getElementById("demo").innerHTML = userId + scriptId + cronFormat;   // Get the element with id="demo"
        });
    }
});

因此，如果在行中，一个用户将cron格式更改为*/5 * * *，它仍会显示在"demo"

*/2 * * 5 *

我怎么能克服这个？

Answer 1

您正在将Jquery与AngularJS混合使用，不建议这样做。

您正在更新innerHTML，但如果您正在使用Angular，则不是这样做的方法。相反，您需要ng-model并更新它：

<p id="demo">{{demoData}}</p>

在你的函数中，你也应该使用Angular的$http提供者：

$scope.saveCron = function(userId,scriptId,cronFormat){
        var data = //format your "user_id=userId&script_id=scriptId&cron=cronFormat" 
                   //here inside an object
        $http.post("updateCronChange.php", data).success(function(data){
            $scope.demoData = userId + scriptId + cronFormat;
        });
    }

编辑：不确定为什么你有这个范围，但是为了改变cronFormat，它也应该在ng-model中。

我把它改成了这个并且它有效：

<td class="cronFormat"><input type="text" ng-model="row.cron_format"/><button class="save"  ng-click="saveCron(row.user_id,row.script_id,row.cron_format)">save</button></td>

看看这个Fiddle。

ng-click无法识别表中的更改

1 个答案: