CODEWITHSUNDEEP
javascriptangularjsasp.net-mvc-3
Ahmad Shli
Ahmad Shli

Reputation: 69

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

Upvotes: 0

Views: 248

Answers (5)

Maher
Maher

Reputation: 2547

UPDATED to online version with $http get... you can return object or string or id, see the example

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

        app.controller("ctrl", function ($scope, $http) {
            $scope.showList = true;
            $scope.defaultValue = {};

            var root = "http://jsonplaceholder.typicode.com";

            $http.get(root + "/users").success(function (response) {
                $scope.supervisorsList = response;
                $scope.defaultValue = $scope.supervisorsList[0];
                $scope.svFullName = $scope.supervisorsList[0];
            });

            //default

            //reset
            $scope.reset = function () {
                $scope.showList = false;
                $scope.svFullName = $scope.defaultValue;
            }

        });
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
    <title></title>
</head>
<body>

    <div>{{svFullName.name}}</div>
    <div>
        <select ng-model="svFullName" ng-show="showList" ng-options="z as z.name for z in supervisorsList"></select>
        <button ng-show="showList" ng-click="showList = false">save</button>
        <button ng-show="showList" ng-click="reset()">cancel</button>
        <button ng-hide="showList" ng-click="showList = true">change</button>
    </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  
</body>
</html>

Upvotes: 1

User2
User2

Reputation: 1293

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>

Upvotes: 1

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

You are using a value tag in ng-repeat select

 <option value="{{z.supervisorfName + " " + z.supervisorlName}}" ng-repeat="z in supervisorsList">{{z.supervisorfName + " " + z.supervisorlName}}</option>

You can also use ng-options https://docs.angularjs.org/api/ng/directive/ngOptions

Upvotes: 0

byteC0de
byteC0de

Reputation: 5273

Try $scope.$digest after value change

Upvotes: 0

Jignesh Patel
Jignesh Patel

Reputation: 199

Please try updating code to following 

 $scope.defaultsvFullName = response.data[0].supervisorfName + " " + response.data[0].supervisorlName;

in below method

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

Please let me know if it helps.

Upvotes: 0

Related Questions