AngularJS - 外部模板 [英] AngularJS - external template

问题描述

我做一个模板的每一个内容，而且因为我有很多的数据显示，但都在相同的结构。

I am doing a template for every content of and because I have much data to show but all in the same structure.

下面中的index.html

Here the index.html

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

在这里的script.js：

here the 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：

and here the 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>

它的工作原理！
但是：如果我点击第一个按钮，然后第二个，第一个按钮不消失的内容，它出现在第一个按钮的内容下...
与重复问题？

It works! But: if I click the first button and then the second one, the content of the first button do not disappear, it appears under the content of the first button... Problem with the repetition?

感谢

推荐答案

这是NG重复的每一个元素都有自己的适用范围，从外部（控制器）范围继承。

Each element of an ng-repeat has its own scope, inheriting from the outer (controller) scope.

您应该存储对象中的控制器范围的一个目的，以显示。例如：方法

You should store the object to show in an object of the controller scope. For example: methods

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

这篇关于AngularJS - 外部模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！