角度范围变量未设置

Question

我是 Angular JS 的学习者。我正在尝试 $http 并将相应的值设置为范围变量。但它不起作用。下面是html的sn-p。

<div ng-app="fileapp" ng-controller="myctl" ng-init="hidevar=true">
    <div ng-hide="hidevar" class="ng-hide">
        <table>
        <tbody ng:repeat="x in dataobj">
        <tr><td>{{x.url}}</td></tr>
        </tbody>
        </table>
    </div></div>

下面是angular js的成功回调脚本

success(function(data) {
                                            console.log(data);
                                            var d=angular.fromJson(data);
                                            console.log('d is:'+d.url);
                                            $window.alert(d.url);
                                            $scope.dataobj=data;
                                            //$scope.url=data.url;
                                            $scope.hidevar =false;

我在 console.log 和 window.alert 中得到了预期的 url 字符串值。但是 $scope.dataobj=data; 中并没有反映出这一点。和 $scope.hidevar =false;

ng hidden 未设置为 false，并且来自服务的 json 数据未设置为 dataobj。 下面是控制台输出。

我像下面这样更改了列表 div，但仍然没有运气

<div ng-hide="hidevar" class="ng-hide">
        <table>
        <tbody>
        <tr><td>{{dataobj.url}}</td></tr>
        </tbody>
        </table>
    </div>

我添加了一个隐藏部分并更新了作用域内的隐藏变量，但这并没有反映出来。

  <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
  <!-- Angular Material Dependencies -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <!--<script src="app.js"></script> -->
</head>

<body ng-app="plnkrApp" ng-controller="DemoController" ng-init="myvar=true">
  <h1>Array</h1>
  <table>
    <tbody ng:repeat="x in array">
      <tr>
        <td>{{x.url}}</td>
      </tr>
    </tbody>
  </table>
  <h1>Object</h1>
  <table>
    <tbody ng:repeat="x in object">
      <tr>
        <td>{{x}}</td>
      </tr>
    </tbody>
  </table>
  <div ng-hide="myvar">
    <p>Hidden Section</p>
  </div>
  <script>

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

app
  .controller("DemoController", function($scope) {
    $scope.array = [ {url: 'test1'}, {url: 'test2'}, {url: 'test3'}];
    $scope.object = {url: 'test1'};
    $scope.myvar=false;
  });
  </script>
</body>

</html>

隐藏部分未显示。为什么数据没有绑定到隐藏变量？

Answer 1

你得到的是一个对象，而不是数组中的多个对象。

对这个对象执行ng-repeat 只需要{{x}} 而不是{{x.url}}，但这是不对的。

使用包含 2 个或更多这些对象的数组创建一个测试范围变量。你会发现它会按照你想要的方式工作。

$scope.test = [ {url: 'test1'}, {url: 'test2'}, {url: 'test3'}];

编辑：这是一个显示差异的 Plunkr：

http://embed.plnkr.co/6wSuAPHPCSZF60Pph85V/