Home>

Foreword

Everyone in the usual project development,You should often encounter the needs shown in the figure above,Is that there are multiple tags in a page,The selected label color will be highlighted,Switch between different tabs to display different contents accordingly.If the content code is too much, it will be very messy to write in the same html file.So here we better manage the page code separately.The controller can also be managed separately,This will make it much clearer.

Here we will use a ng-include directive in angularjs. Here's a detailed introduction:

First, the preparation of multiple tags

First you need to understand the requirements:

1. Only one label can be selected at the same time

2. The selected label's background color and its own color will change.

The first requirement we can use a flag variable to control,That is, one is a flag and the other is! flag. The second requirement can be accomplished using the ng-class directive.Write the two style classes in advance, and use ng-class to determine when to display which style.

Here I have written all the logic code in the html page. First, when the page is initialized, use the ng-init instruction to initialize a flag variable, and use ng-class to bind different stylesThen use the ng-click event to dynamically change the flag.

code show as below:

<ion-view ng-init="test=true">
 <div>
 <div>test</div>
 </div>
 <div>
 <div>
  <a ng-class="test&" 63 "" button-positive ":" "" ng-click="test=true"&button1</a>
  <a ng-class="! Test?" button-positive ":" "" ng-click="test=false">button2</a>
 </div>
 </div>
 <ion-content>
  </ion-content>
</ion-view>

Second, the use of ng-include

Multi-label button is written,Need to display the corresponding page content for the clicked button,Here we use ng-include to manage the code.as follows:

<ion-content>
 <div ng-show="test" ng-include="" template/template1.html "">No matter what is written here,Completely replaced by ng-include</div>
 <div ng-show="! Test" ng-include="" template/template2.html ""></div>
</ion-content>

Here I use ng-show, that is, the entire content is loaded when the page loads,Can play a pre-loaded effect,Of course, if you need to display the corresponding content when you click the corresponding button, you can use ng-if, the effect is the same.

The url address corresponding to the html file is written after ng-include, which is the address relative to index.html.

Take a look at the template1 code:

<div ng-controller="template1controller">
 <div>
 <div ng-repeat="x in tests">{{x.name}}</div>
 </div>
</div>

I have a separate controller management for template1, the ctrl code is:

angular.module ("includeexample", ["ionic"])
 .controller ("template1controller", ["$scope", function ($scope) {
 $scope.tests=[
  {
  name:"test1"
  }, {
  name:"test2"
  }, {
  name:"test3"
  }
 ]
 }]);

At this point, the usage of ng-include is probably finished,I think it is more useful in the development of the project.Separating management logic and pages will be clearer,It will also improve development efficiency to a certain extent.

The effect is:

to sum up

  • Previous Solve the problem of blank at the end when switching between plain text and cipher text with UITextField in iOS
  • Next Analysis of the difference between include and require in PHP