2016-07-25 26 views
0

私は角型JSの学習者です。私は$ httpを試して、スコープ変数に対応する値を設定します。しかし、それは仕事をしません。以下はhtmlのスニペットです。以下角度範囲変数が設定されていません

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

成功は私がにconsole.logで予想されるURL文字列値を取得してものwindow.alertでい

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; 

角度JSでスクリプトをコールバックです。しかし、同じものは$ scope.dataobj = dataで再選択されません。および $ scope.hidevar = false;

ng hiddenはfalseに設定されておらず、サービスからのjsonデータもdataobjに設定されていません。 以下はコンソールの出力です。

enter image description here

私は隠されたセクションを追加し、範囲内の隠れ変数を更新しましたが、それが反映されていない以下それでも運

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

のようなリストの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> 

隠しセクションは表示されません。データが隠し変数にバインドされていないのはなぜですか?

答えて

0

アレイ内に複数のオブジェクトではなく、オブジェクトが戻ってきています。

このオブジェクトでng-repeatを実行すると、{{x.url}}の代わりに{{x}}が必要になりますが、それは正しくありません。

これらのオブジェクトの2つ以上の配列でテストスコープ変数を作成します。あなたはそれがあなたが望むように動作することがわかります。

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

編集:ここではは違いを示すPlunkrです:

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

+0

こんにちは、私の編集を参照してください。リストを置き換えても機能しません。テーブル付き。 – GAK

+0

ng-hideをクラスにハードコードしました:class = "ng-hide"それは決して現れません。 – austinthedeveloper

+0

デモコードを更新しました。編集セクションを見てください。 – GAK

関連する問題