2

and のすべてのコンテンツのテンプレートを作成しています。これは、表示するデータがたくさんあるが、すべて同じ構造になっているためです。

ここにindex.html

<div ng-model="methods" 
 ng-include="'templateMethod.html'" 
 ng-repeat = "method in methods">

ここにscript.js：

function Ctrl($scope) {
$scope.methods =
[ { name: 'method1',
    description: 'bla bla bla',
    benefits: 'benefits of method1',
    bestPractices : 'bestPractices',
    example: 'example'},

 { name: 'method2',
    description: 'bla bla bla',
    benefits: 'benefits of method2',
    bestPractices : 'bestPractices',
    example: 'example'} ];
}

そしてここでは templateMethod.html:

<table>
 <tr>
   <td>
     <div ng-show="toShow=='{{method.name}}Field'">
     <h3>{{mmethodethod.name}}</h3>
     <p>    
       <strong>Description</strong>
       {{method.description}}
     </p>
     <p>    
       <strong>Benefits</strong>
       {{method.benefits}}
     </p>
     <p>
       <strong>Best practices</strong>
       {{method.bestPractices}}
     </p>
      <p>   
        <strong>Examples</strong>
        {{method.example}}
      </p>
    </div>
    </td>
    <td class = "sidebar">
      <ul>
         <li><a ng-click="toShow='{{method.name}}Field'" class="{{method.name}} buttons">{{method.name}}</a></li>   
      </ul>             
    </td>
  </tr>
</table>

できます！しかし: 最初のボタンをクリックしてから 2 番目のボタンをクリックすると、最初のボタンのコンテンツが消えず、最初のボタンのコンテンツの下に表示されます... 繰り返しに問題がありますか?

ありがとう

4

3 に答える 3

1

この問題は実際には、各 ng-repeat Angular が新しいスコープを作成するという事実に関連しているため、親スコープに何かが必要です。つまり、各メソッドの可視ステータスを参照するために使用できるコントローラーなどです。これ：

http://jsfiddle.net/strokov/FEgK3/1/

基本的に、ng-show をメソッド オブジェクトのプロパティに設定します。

 <div ng-show="method.show">

クリック メソッドでは、スコープで show(method) という関数を呼び出します。これは、すべてのメソッドで method.show プロパティの設定を処理するため、基本的にすべて非表示になり、クリックされたものを次のように表示します。

$scope.show = function(method) {
    angular.forEach($scope.methods, function(method){
       method.show = 0;
    });
    method.show = 1;
};

この css スタイルを使用すると、HTML で表されるさまざまな角度範囲をどのように表示するかがわかります。

.ng-scope { ボーダー: 1px 破線の赤; 余白: 5px; }

于 2013-10-27T19:20:36.653 に答える
1

ng-repeat の各要素には、外部 (コントローラー) スコープから継承する独自のスコープがあります。

表示するオブジェクトは、コントローラー スコープのオブジェクトに格納する必要があります。例えば：methods

<div ng-show="methods.toShow=='{{method.name}}Field'">
...
<a ng-click="methods.toShow='{{method.name}}Field'"
于 2013-10-27T18:14:05.523 に答える
1

基本的に JB Nizet が言ったことは、これが動作中のplunkerです。問題は、ng-include と ng-repeat が独自のスコープを作成することです。子スコープは親スコープのプロパティへの読み取り専用アクセスを持っているため、スコープ間で読み取りと書き込みの両方のアクセスを取得するには、追加のオブジェクト参照が必要です。

Javascript:

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

app.controller('MainCtrl', function($scope) {
  $scope.state = { toShow: false };
  $scope.methods = [{
      name: 'method1',
      description: 'bla bla bla',
      benefits: 'benefits of method1',
      bestPractices: 'bestPractices',
      example: 'example'
    },

    {
      name: 'method2',
      description: 'bla bla bla',
      benefits: 'benefits of method2',
      bestPractices: 'bestPractices',
      example: 'example'
    }
  ];
});

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
    <script src="app.js"></script>
    <script type="text/ng-template" id="templateMethod.html">
      <table>
       <tr>
         <td>
           <div ng-show="state.toShow == '{{method.name}}Field'">
           <h3>{{mmethodethod.name}}</h3>
           <p>    
             <strong>Description</strong>
             {{method.description}}
           </p>
           <p>    
             <strong>Benefits</strong>
             {{method.benefits}}
           </p>
           <p>
             <strong>Best practices</strong>
             {{method.bestPractices}}
           </p>
            <p>   
              <strong>Examples</strong>
              {{method.example}}
            </p>
          </div>
          </td>
          <td class = "sidebar">
            <ul>
               <li><a ng-click="state.toShow = '{{method.name}}Field'" class="{{method.name}} buttons">{{method.name}}</a></li>   
            </ul>             
          </td>
        </tr>
      </table>
    </script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-model="methods" 
 ng-include="'templateMethod.html'" 
 ng-repeat = "method in methods">
  </body>

</html>
于 2013-10-27T18:15:52.127 に答える