2. 程式人生 > >angular路由與ng-options/ng-include指令

angular路由與ng-options/ng-include指令

阿新 • • 發佈：2018-12-30
ng-options下拉列表指令 ng-options="fruit.name for fruit in main.fruitArr" fruit 是通過遍歷 main.fruitArr 取出的每一個物件 fruit.name 是取出 fruit物件中的 name屬性值 注意: ng-options指令需要與ng-model同時使用 預設選中 設定的選中項 ng-model="main.selected" ng-options="fruit.name as fruit.name for fruit in main.fruitArr" 第一個fruit.name是select 選中的內容,和前面的ng-model繫結的值一樣 ng-include包含指令
ng-include三種引入模版： 以屬性形式 <div ng-include=""></div> 以元素形式 <ng-include src=""></ng-include> 以類名形式 <div class="ng-include: main.template.url"></div> 路由 第一步引入angular-route.js angular.module('myApp',['ngRoute']) 在.config()中配置路由 /** *第一個引數: 路徑(位址列中#號後面的內容),第二個引數: 路徑對應的模版和控制器 */ $routeProvider.when('/home',{ //模版路徑 templateUrl: 'home.html', //模版對應的控制器, 相當於以前寫的 ng-controller, 模版中可以使用控制器作用域中的方法和屬性 controller: 'homeController' }); //其他情況下的模版和控制器(引數可以是字串或對像) $routeProvider.otherwise('/home'); $routeProvider.後面接when與otherwise，可以鏈式操作 如: $routeProvider .when('/user',{ templateUrl: 'user.html', controller: 'userController' }) .when('/other',{ templateUrl: 'user.html', controller: 'userController' }) .otherwise('/home'); 路由與ng-view指令結合使用
ng-view用來承載模版，三種使用方式 以元素形式 <ng-view></ng-view> 以類名形式 <div class="ng-view"></div> 以屬性形式 <div ng-view></div> 如: <body ng-app="myApp"> <!-- ng-view用來承載模版,有三種形式 --> <!--<ng-view></ng-view>--> <!-- 類名形式 --> <!--<div class="ng-view"></div>--> <!-- 屬性形式 --> <div ng-view></div> </body> 在控制器中可以通過$location.path('/home');來改變路由 $scope.main = { name: 'user頁面', toHomeView: function () { $location.path('/home'); } } when()中的引數
第一個是路由路徑 第二個是配置引數 template:對應的頁面模版 templateUrl：對應的模版路徑 controller：對應的控制器 resolve:該屬性會以健值對物件的形式，給相關的路由的控制器繫結服務或值。然後把執行的結果或服務引用，注入到控制器中。注意：與factory()結合使用 redirectTo:重定向路徑地址 reloadOnSearch: true/false    如果為true，每次查詢串發生變化都會引起路由重新整理；如果味false，查詢串發生變化不會引起路由變化 如： 1、template: '<div>other模版</div>', 2、templateUrl: 'home.html', 3、controller: 'homeController', 4、resolve: { //該物件的屬性與服務都可以注入到homeController控制器中使用 //屬性值必須是服務的名字 res: 'cool', //函式引數必須是服務的名字 getData: function (GetData) { return GetData; }, getDataTwo: function (GetDataTwo) { return GetDataTwo.getDataJson; } } .factory('cool',function () { return 'cool'; }) .factory('GetData',['$http',function ($http) { return function () { return $http({method: 'get',url: 'data/news.json'}); }; }]) .factory('GetDataTwo',['$http',function ($http) { return { getDataJson: $http({method: 'get', url: 'data/news.json'}) }; }]) 5、（1）redirectTo: '/home' （2） /** * @param a 物件,裡面的屬性都是路由引數 * @param b 路由路徑 * @param c 查詢串物件 * @returns {string} */ redirectTo: function (a,b,c) { console.log([a,b,c]); return '/home'; } 在控制器中設定查詢串 $location.search('password=123');

相關推薦

angular路由與ng-options/ng-include指令

ng-options下拉列表指令 ng-options="fruit.name for fruit in main.fruitArr" fruit 是通過遍歷 main.fruitArr 取出的每一個物件 fruit.name 是取出 fruit物件中的 name屬性值

Angular路由守衛 canDeactivate （ng-zorro)

原文出處：http://www.cnblogs.com/Lulus/p/9497870.html 目的 離開頁面時，做出邏輯判斷 以ng-alain的專案為基礎做演示 效果如圖： 關鍵程式碼 定義一個CanDeactivateGuardService export class C

Angular(ng-include指令-嵌套)

div scope ctrl erl utf-8 外部 head .... -c html部分 .........................................................................................

angular中的常見指令ng-if、ng-class、ng-options、ng-value、ng-click

  這裡是修真院前端小課堂，每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能，本篇分享的是： 【angular中的常見指令ng-if、ng-class、ng-options

angular中的ng-options 用法

ng- -o value set lec html sel -m 選擇 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title

ionic中ng-options與默認選中第一項的問題

class 設置 -- ctc 添加數據 消失 val 默認選中第一項 route 1. select中動態添加數據時發現一個選項為空，在選中了其他選項時，在點擊時發現第一個空選項消失了，所有我們需要設置一個默認的選項； 2. 開始的時候我用的方法： <select

AngularJs 的ng-include指令的使用

AngularJs通過指令ng-include來將頁面中共用的模組分離出來，這個功能和mvc裡面的分部頁的作用一樣的。 先看檔案的結構： 父頁面： <!DOCTYPE html> <html> <head> <meta charset="

關於Angular js的檔案引用和模板問題（ng-view,ng-include）

1.ng-view和ng-include的區別     首先先說一下這兩個指令的區別，ng-view這個方法通過使用路由控制，可以方便的實現頁面組合。但這個方法也有一個重大缺點，就是一個html檔案中，只能有一個ng-view。雖然有變通之法。他是可以被ctl控制的。 n

Angular js指令 ng-if&&ng-show

1⃣️問題描述： ng-if：刪除整個dom元素； ng-show：控制新增的html元素的顯示與消失，作用類似於css的dispaly：none和block； 重點在於ng-if會遇到scope繫結值錯誤的情況； 2⃣️html程式碼 效果： 程式碼分析：

《我的Angular入坑記》——ng-options的使用

        ng-options 指令用於使用 <options> 填充 <select> 元素的選項，當select中一個選項被選擇，該選項將會被繫結到ng-model。 n

AngularJS中ng-include指令實現頭部和尾部的共用

在使用AngularJS的時候，我們可以使用ng-include指令實現頁面頭部和尾部的共用，。不過在使用ng-include指令的時候也是需要注意一些細節的。就是共用的頭部和尾部的路徑在ng-include中寫法 <!DOCTYPE html> <htm

angularjs: ng-select和ng-options

for -m 復制代碼 too 遞增 mod 中項 tle data angular.js有一個很強大的指令: ng-select 它可以幫助你通過數據模型來創建select元素.它很好的支持了select標簽的語法,但是卻有點坑. 假設有如下一段json數據: {

angularjs的ng-options時如何設置默認值(初始值)

-m item 如何 lrj then select model option color hhtml:<select ng-change="change2()" ng-model="selected" ng-options="item.id for i

ng-options用法詳解

ota ack for in func mode [] 列表 checkbox nop ng-options屬性可以在表達式中使用數組或對象來自動生成一個select中的option列表。ng-options與ng-repeat很相似，很多時候可以用ng-repeat來代替

include 指令與include 動作的區別

其他 插入 include動作 包含 動作 得到 位置 執行 字節 include指令稱為文件加載指令，可以將其他文件插入jsp網頁，被插入的文件必須保證插入後形成的新文件符合jsp頁面的語法規則。其功能：該指令標簽作用是在該標簽的位置處，靜態插入一個文件。 include

使用angluar-cli的ng g component home指令出現的錯誤

modules ins bpa sco user module iterator mod ask Error: ELOOP: too many symbolic links encountered, stat ‘/Users/zzy/angular/taskmgr/node

include指令與include動作標識的區別

JSP中主要包含三大指令，分別是page，include，taglib。本篇主要提及include指令。 include指令使用格式：<%@ include file=“檔案的絕對路徑或相對路徑”%> file屬性：指定被包含的檔案，該屬性不支援任何表示式，也不允許通過如

Angularjs 關於Angularjs的ng-options設定下拉框的value的值

<div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="item.id as item.name for item in names"> //ite

angular js與node js相關指令的複習

angular js自定義指令 定義一個指令本質上是在HTML中通過元素，屬性，類或註釋來新增功能， MainModel.directive("myDirective",function () { return { restrict:"A",

Angular Chart.js第三方庫ng-chartjs基礎使用

Angular Chart.js第三方庫ng-chartjs基礎使用 專案github地址 這個專案支援基本的Chart.js圖表，並且支援內聯外掛和全域性外掛的使用。 Demo地址 支援圖表型別 line bar radar pie