CODEWITHSUNDEEP
javascriptangularjs
user2483256
user2483256

Reputation: 3

Angular $scope.list[index] does not update

I have the problem that when I update an item the array of objects in $scope.list are updated, but when I want a specific item by using $scope.list[index] it is not updated. The following logs give me this output.

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");

This happens when I make changes in the browser and want to push them back to the backend.

The console is:

enter image description here

Also when i open the log of the specific item, it changes.

enter image description here

The controller

(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>';

 }
 })();

The view

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

Upvotes: 0

Views: 213

Answers (1)

ArunMozhi Varman
ArunMozhi Varman

Reputation: 31

Try like below.

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

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

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

Upvotes: 1

Related Questions