Ahmed Alsahli Ahmed Alsahli - 5 months ago 12
AngularJS Question

Scope value does not reflect in the view

I really need your help... I have problem in updating scope in my ASP.Net MVC/AngularJS.

The issue with

$scope.svFullName
... It does not reflect in the view when I change its value even though it is changing in the JS code because i have tested it from the js. Here is my code:

View:

<td ng-repeat="x in supervisors | limitTo:1" style="width: 60%;">
<div ng-show="!svElements">{{svFullName}}</div>
<div ng-show="svElements">
<select ng-model='svFullName' ng-selected='svFullName'>
<option ng-repeat="z in supervisorsList">{{z.supervisorfName + " " + z.supervisorlName}}</option>
</select>
<a href="javascript:void(0)">Save</a>
</div>





Edit
Save


JS:

var myApp = angular.module('myApp', []);
myApp.controller('mainController', function ($scope, $http) {
$http.get('/Home/GetSupervisor')
.then(function (response) {
$scope.supervisors = response.data;
$scope.svFullName = response.data[0].supervisorfName + " " + response.data[0].supervisorlName;
$scope.defaultsvFullName = $scope.svFullName;
})
.catch(function (e) {
console.log("error", e);
throw e;
})
.finally(function () {
console.log("This finally block");
});

$http.get('/Home/GetSupervisorsList')
.then(function (response) {
$scope.supervisorsList = response.data;
})
.catch(function (e) {
console.log("error", e);
throw e;
})
.finally(function () {
console.log("This finally block");
});

$scope.svElements = false;
$scope.toggleSV = function () {
if ($scope.svElements) {
$scope.svFullName = $scope.defaultsvFullName;
}
$scope.svElements = !$scope.svElements;
}
});


The
$scope.svFullName
is bonded with the
div
, so when I click on edit, and when I change the name, the
$scope.svFullName
will be changed... What I want to do is, changing back the
$scope.svFullName
to its default value when I click on cancel.

The value does not reflect in the view

Answer

Please check working example : Demo

Change your variable to object i.e

$scope.svFullName to $scope.name.svFullName

Because ng-repeat creates its own scope, for more information please check -

Understanding Scopes

In app.js

app.controller('MainCtrl', function ($scope, $http) {
   $http.get('supervisor.json')
        .then(function (response) {
              $scope.supervisors = response.data;
              $scope.name = {};
              $scope.name.svFullName = response.data[0].supervisorfName + " " + response.data[0].supervisorlName;
              $scope.defaultsvFullName = $scope.name.svFullName;

         })
         .catch(function (e) {
              console.log("error", e);
              throw e;
          })
          .finally(function () {
               console.log("This finally block");
          });

   $http.get('supervisor-list.json')
        .then(function (response) {
              $scope.supervisorsList = response.data;
        })
        .catch(function (e) {
              console.log("error", e);
              throw e;
        })
        .finally(function () {
              console.log("This finally block");
        });

        $scope.svElements = false;
        $scope.toggleSV = function () {

             if ($scope.svElements) {
                  $scope.name.svFullName = $scope.defaultsvFullName;

             }
             $scope.svElements = !$scope.svElements;
       }
 }) 

In HTML

<div ng-click="svElements = !svElements"> Edit</div>
   <div ng-repeat="x in supervisors | limitTo:1" style="width: 60%;">
       <div ng-show="!svElements">{{name.svFullName}}</div>
       <div ng-show="svElements">
            <select ng-model='name.svFullName' ng-selected='name.svFullName'>
                  <option ng-repeat="z in supervisorsList">{{z.supervisorfName + " " + z.supervisorlName}}</option>
            </select>
            <a href="javascript:void(0)">Save</a>
            <a href="javascript:void(0)" ng-click="toggleSV()">cancel</a>
       </div>
</div>
Comments