Original Ng-include usage analysis and simple implementation of multi-label pages

In peacetime project development, should often encounter the requirements shown, that is, there are multiple tabs on a page, the selected label color will be highlighted, switch different labels to display the corresponding different content. If the content code is too much to write in the same HTML file will be very messy, so here we better separate the page code separately managed, controller can also be separated to manage, so it will appear more clear. Here you will use a ng-include instruction in the ANGULARJS.

I. Multi-label Authoring

First you need to understand the requirements:

1. Only one label can be selected at a time

2. The selected label background color and the auto color will change.

First requirement we can use a flag variable to control that one is flag and the other is! Flag The second requirement can be done using the Ng-class directive, which is written in two styles in advance, and Ng-class to determine when to show what style.

Here I write all the logic code in the HTML page, first initializes a flag variable with the ng-init instruction when the page is initialized, binds the different styles using Ng-class, and then uses the Ng-click event to dynamically change the flag. The code is as follows:

<ion-view ng-init="test=true">  <div class="bar bar-header bar-royal">    <div class="title">Test</div>  </div>  <div class="bar bar-subheader">    <div class="button-bar">      <a class="button" ng-class="test?‘button-positive‘:‘‘" ng-click="test=true">button1</a>      <a class="button" ng-class="!test?‘button-positive‘:‘‘" ng-click="test=false">button2</a>    </div>  </div>  <ion-content class="has-subheader">     </ion-content></ion-view>

Two. Use of Ng-include

The Multi-label button is written, and you need to display the corresponding page content for the clicked button, which uses Ng-include to manage the code. As follows:

<ion-content class="has-subheader">    <div ng-show="test" ng-include="‘template/template1.html‘">这里不管写什么都不会展示,完全被ng-include取代</div>    <div ng-show="!test" ng-include="‘template/template2.html‘"></div></ion-content>

Here I use the ng-show, that is, when the page loading all the content loaded, can play a pre-loading effect, of course, if you need to click the corresponding button when the corresponding content can be used ng-if, the same effect.

Ng-include is followed by the URL address of the HTML file, which is relative to the index.html address.

Take a look at the Template1 code:

<div ng-controller="template1Controller">  <div class="row">    <div class="col text-center" ng-repeat="x in tests">{{x.name}}</div>  </div></div>

I have a separate controller management for TEMPLATE1, and the CTRL code is:

angular.module(‘includeExample‘, [‘ionic‘])  .controller(‘template1Controller‘, [‘$scope‘, function ($scope) {    $scope.tests = [      {        name: ‘test1‘      }, {        name: ‘test2‘      }, {        name: ‘test3‘      }    ]  }]);

To this, the usage of ng-include is probably finished, I think in the development of the project is still more useful, separate management logic and pages will be more clear, but also to a certain extent, improve the development efficiency.

The effect is:

Original Ng-include usage analysis and simple implementation of multi-label pages