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

使用$ http获取更新到在线版本...您可以返回对象或字符串或ID，请参阅示例

        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 2

请查看工作示例：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>

Answer 3

请尝试将代码更新为以下

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

在值更改后尝试$ scope。$ digest

Answer 5

您在ng-repeat选择

中使用了值标记

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

您也可以使用ng-options     https://docs.angularjs.org/api/ng/directive/ngOptions

范围值不会反映在视图中

5 个答案: