Geek Answers Handbook

AngularJS - external template

I make a template for each content, and because I have a lot of data to show, but all in one structure.

Here index.html

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

here is 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'} ];
}

and here 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 press the first button, and then the second, the contents of the first button will not disappear, it will appear under the contents of the first button ... Is there a problem with the repetition?

thanks

+2
source share
3 answers

Each ng-repeat element has its own region inheriting from the outer (control) region.

You must save the object for display in the object area of ​​the controller. For example:methods

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

, JB Nizet, plunker. , ng-include ng-repeat . Child , , , .

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

, ng-repeat Angular , - , : , , - :

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

ng-show :

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

And in the click method, I call a function in the Scope area called show (method), which will take care of setting the method.show property for all methods, so basically we are all hidden and then show a click like this:

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

You will notice that with this css style, how to see every different area of ​​Angular presented in HTML:

.ng-scope {border: 1px dotted red; margin: 5px; }

+1
source

More articles:


All Articles