ng-click不會識別表

Question

中的更改im試圖查看發送到函數cronSave(user_id,script_id,cron_format)的值。問題是cron_format是<contenteditable>屬性和功能將僅顯示值innitialized表沒有得到的變化.. 這是表：

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

仍顯示3210我怎麼能克服這個？

Answer 1

您正在混合使用Jquery和AngularJS，不建議使用這種方法。

您正在更新innerHTML，但如果您正在使用Angular，那不是做事情的方式。相反，你需要有ng-model，並讓它更新：

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

而在你的功能，你也應該採用了棱角分明的$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。