Anguar command write tab, anguar command Tab
Today, let's learn how to use commands in angular to implement two tabs.
First, introduce the jQuery file and angularjs file.
<! DOCTYPE html>
<Html lang = "en" ng-app = "app">
<Head>
<Meta charset = "UTF-8">
<Title> Title </title>
<Style>
/* Define the selected button style */
. On {
Background: red;
}
/* Layout the content */
P {
Border: #000 1px solid;
Width: 200px;
Display: none;
Height: 200px;
}
</Style>
<Script src = "jquery-3.1.1.js"> </script>
<Script src = "angular. min. js"> </script>
<Script>
Var app = angular. module ("app", []); // defines the angular module
App. controller ("ctrl", function ($ scope ){
$ Scope. list = [
{"Name": "news", "content": "news "},
{"Name": "Sports", "content": "Sports "},
{"Name": "Entertainment", "content": "Entertainment "}
];
$ Scope. list2 = [
{"Name": "News 2", "content": "News 2 "},
{"Name": "Sports 2", "content": "Sports 2 "},
{"Name": "Entertainment 2", "content": "Entertainment 2 "},
{"Name": "Agriculture", "content": "Agriculture "}
]
});
App. directive ("myTab", function () {// you must use the camper method to define a name.
Return {
Link: function (scope, element, attr) {// use jQuery to achieve the effect
Element. delegate ("input", "click", function (){
$ (This). attr ("class", "on"). siblings ("input"). attr ("class ","");
$ (This). siblings ("p"). eq ($ (this). index (). show (). siblings ("p"). hide ();
})
},
Restrict: "ECMA ",
Replace: true,
// Scope: true, // resolve the conflict
Scope :{
MyId: "@", // bind a string
MyData: "=" // bind a variable
}
TemplateUrl: "tab.html"
}
})
</Script>
</Head>
<Body ng-controller = "ctrl">
<My-tab my-id = "div1" my-data = "list"> </my-tab>
<My-tab my-id = "div2" my-data = "list2"> </my-tab>
</Body>
</Html>
Tab.html
<Div id = "{myId}">
<Input ng-repeat = "data in myData" type = "button" value = "{data. title}" ng-class = "{on: $ first}">
<P ng-repeat = "data in myData" ng-style = "{display: $ first? 'Block': 'none'} ">{{ data. content }}</p>
</Div>
In this way, the effect of the two tabs is complete. have you learned? You can also use custom commands to write and drag.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
