角度$ scope.list [インデックス]が更新されない

Question

アイテムを更新すると$ scope.listのオブジェクトの配列が更新されますが、$ scope.list [インデックス]は更新されません。以下のログは私にこの出力を与えます。

これは、ブラウザで変更を加えてバックエンドに戻したい場合に発生します。

コンソールは次のとおりです。私は、特定の項目のログを開いたときに

また、それが変更されます。

コントローラ

(function() { 
'use strict'; 

angular.module('BlurAdmin.pages.entertainment') 
.config(['$httpProvider', function ($httpProvider) { 
    $httpProvider.defaults.headers.common['Authorization'] = 'Basic MTpwYXNzd29yZA=='; 
    delete $httpProvider.defaults.headers.common["X-Requested-With"]; 
}]) 
.factory('myService', function ($http) { 
    var getData = function() { 

    // Angular $http() and then() both return promises themselves 
    return $http.get('http://192.168.12.11:8090/joke').then(function (result) { 

     // What we return here is the data that will be accessible 
     // to us after the promise resolves 
     return result.data; 
    }); 
    }; 

    var putData = function (joke, index) { 
    console.log("PUT"); 
    console.log(joke[0]); 
    return $http.put('http://192.168.12.11:8090/joke/' + joke[index].id, joke[index]); 
    }; 
    var remData = function (index) { 
    console.log("REMOVE"); 
    return $http.delete('http://192.168.12.11:8090/joke/' + index); 
    }; 
    return { 
    getData: getData, 
    putData: putData, 
    remData: remData 
    }; 
}) 

.controller('EntertainmentCtrl', EntertainmentCtrl); 

/** @ngInject */ 
function EntertainmentCtrl($scope, $timeout, editableOptions, editableThemes, myService, $filter) { 
$scope.progressFunction = function() { 
    return $timeout(function() { }, 3000); 
}; 

var myDataPromise = myService.getData(); 
$scope.selectedFromList = null; 
myDataPromise.then(function (result) { 
    console.log("promise"); 
    console.log(result); 
    $scope.list = result; 
}); 

$scope.removeJoke = function (index) { 
    $scope.list.splice(index, 1); 
    myService.remData($scope.list[index].id); 
}; 

$scope.addJoke = function() { 
    $scope.inserted = { 
    id: $scope.list.length + 1, 
    joke: '', 
    }; 
    myService.putData($scope.inserted); 
    $scope.list.push($scope.inserted); 
}; 

$scope.save = function (index) { 
    console.log("HEAD"); 
    console.log($scope.list); 
    console.log(index); 
    console.log(index + ".id: " + $scope.list[index].id); 
    console.log(index + ".joke: " + $scope.list[index].joke); 
    console.log($scope.list); 
    console.log("END"); 
    $scope.inserted = { 
    id: $scope.list[index].id, 
    joke: $scope.list[index].joke, 
    }; 

    var help = $scope.list; 
    console.log("var help"); 
    console.log(help[index]); 
    myService.putData(help, index); 
} 

editableOptions.theme = 'bs3'; 
editableThemes['bs3'].submitTpl = '<button type="submit" class="btn btn- primary btn-with-icon"><i class="ion-checkmark-round"></i></button>'; 
editableThemes['bs3'].cancelTpl = '<button type="button" ng-click="$form.$cancel()" class="btn btn-default btn-with-icon"><i class="ion-close-round"></i></button>'; 

} 
})(); 

図

<div class="add-row-editable-table"> 
<button class="btn btn-primary" ng-click="addJoke()">Grap toevoegen</button> 
</div> 
<table class="table table-bordered table-hover table-condensed"> 
<tr> 
<td>Grap</td> 
</tr> 
<tr ng-repeat="item in list" class="editable-row"> 
<td> 
    <span editable-text="item.joke" e-name="joke" e-form="rowform" e-required> 
     {{ item.joke || 'empty' }} 
    </span> 
</td> 
<td> 
    <form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == list"> 
    <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary editable-table-button btn-xs" ng-click="save($index)"> 
     Save 
    </button> 
    <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default editable-table-button btn-xs"> 
     Cancel 
    </button> 
    </form> 
    <div class="buttons" ng-show="!rowform.$visible"> 
    <button class="btn btn-primary editable-table-button btn-xs" ng-click="rowform.$show()">Edit</button> 
    <button class="btn btn-danger editable-table-button btn-xs" ng-click="removeJoke($index)">Delete</button> 
    </div> 
</td> 
</tr> 
</table> 

Answer 1

は、以下のようにしてみてください。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
     <script type="text/javascript"> 
 
     \t \t var app= \t angular.module("myApp",[]); 
 

 
     \t \t app.controller("myCTRL",function($scope){ 
 
     \t \t \t 
 
     \t \t \t $scope.names = \t [{name: 'arun'},{name: 'Mozhi'}]; 
 
     \t \t }); 
 
     \t </script> 
 

 
     <body ng-app="myApp" ng-controller="myCTRL"> 
 
     \t <div>   
 
     \t </div><br> 
 
     \t <div ng-repeat="item in names"> 
 
     \t \t <form novalidate> 
 
     \t \t \t <input type="text" placeholder="name" ng-model="item.name"> 
 
     \t \t \t 
 
     \t \t \t <br><br> 
 
     \t \t </form> 
 
     \t \t 
 
     \t </div> 
 
     \t {{names}} 
 
     </body>