Question

我正在为每个内容做一个模板，因为我有很多数据要显示，但所有数据都在同一个结构中。

这里是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>

有效！但是：如果我点击第一个按钮然后第二个按钮，第一个按钮的内容不会消失，它会出现在第一个按钮的内容下... 重复有问题吗？

由于

Answer 1

ng-repeat的每个元素都有自己的范围，继承自外部（控制器）范围。

您应该存储要在控制器范围的对象中显示的对象。例如：methods

<div ng-show="methods.toShow=='{{method.name}}Field'">
...
<a ng-click="methods.toShow='{{method.name}}Field'"

Answer 2

基本上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>

Answer 3

问题实际上与以下事实有关：每个ng-repeat Angular创建一个新范围，因此您需要在父范围内有一些东西，即：一个Controller，您可以使用它来引用每个方法的可见状态，像这样：

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

基本上我将ng-show设置为方法对象的属性：

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

在click方法上，我调用了一个名为show（method）的Scope上的函数，该函数将负责在所有方法上设置method.show属性，所以基本上我们都隐藏了所有，然后显示所点击的一个像这样：

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

您会注意到，使用此css样式，如何查看HTML中表示的每个不同的角度范围：

.ng-scope {border：1px dashed red;保证金：5px; }

AngularJS - 外部模板

3 个答案: