范围值未反映在视图中

Question

我真的需要你的帮助...我在 ASP.Net MVC/AngularJS.

中更新范围时遇到问题

$scope.svFullName 的问题...当我更改它的值时，即使它在 JS 代码中发生变化，它也不会反映在视图中，因为我已经从 js 对其进行了测试。这是我的代码：

查看：

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

编辑救球

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

$scope.svFullName和div是绑定的，所以当我点击编辑的时候，当我更改名称时，$scope.svFullName也会被改变...我想要的要做的是，当我点击取消时，将 $scope.svFullName 改回默认值。

该值未反映在视图中

Answer 1

请尝试将代码更新为以下

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

在下面的方法中

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

如果有帮助，请告诉我。

Answer 2

值更改后尝试 $scope.$digest

Answer 3

您正在 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

Answer 4

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>

Answer 5

请检查工作示例：Demo

将您的变量更改为对象，即

$scope.svFullName to $scope.name.svFullName

因为 ng-repeat 创建了自己的作用域，更多信息请查看 -

Understanding Scopes

在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;
       }
 })

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

范围值未反映在视图中

Scope value does not reflect in the view

javascript

asp.net-mvc-3

angularjs