angularjs切換class_使用Angularjs獲取數組中的值並傳值到html頁面中顯示出來

❶ 使用Angularjs獲取數組中的值並傳值到html頁面中顯示出來

<!DOCTYPEhtml>
<htmlng-app="test">
<head>
<title>Freetrial</title>
</head>
<bodyng-controller="FreetrialController">
<divclass="xsy"ng-repeat="iteminfreetrial"ng-if="use('xy0001',0,item)"id="xy0001">
<ahref="{{item.sdcx()}}"><imgsrc="">{{item.imgurl}}</a>
<h1>{{item.goodstitle}}</h1>
</div>
<scripttype="text/javascript"src="../lib/angular.min.js"></script>
<script>
varapp=angular.mole('test',[]);

app.controller('FreetrialController',function($scope){
$scope.use=function(id,status,item){
varflag=false;
if(!item||(id===item.goodsid&&status===item.status)){
flag=true;
}
returnflag;
}
$scope.freetrial=[
{
goodsid:"xy0001",
imgurl:"img/178.jpg",
goodstitle:"好娃娃牌安全椅",
quantity:"10份",
cost:896,
linkt:"sdcx()",
status:0
},
{
goodsid:"xy0002",
imgurl:"img/178.jpg",
goodstitle:"時尚包",
quantity:"10份",
cost:298,
status:1
},
{
goodsid:"xy0003",
imgurl:"img/178.jpg",
goodstitle:"好娃娃",
quantity:"10份",
cost:896,
linkt:"sdcx()",
status:0
}
]

});
</script>
</body>
</html>
<!--還可以從數據上著手,先把數據按照需求重組，再輸出到視圖-->

❷ angularjs用ng-options綁定select表單,怎麼改變select表單中option的value值樣式

是angularjs版本的問題，採用1.3.6版本。

❸ angularjs怎樣實現Jq的addclass\removeclass

問題： angularjs怎樣實現Jq的addclass\removeclass
描述:
<a >編輯信息</a>
.border-none{
border:none;
}
如何用angular.js實現點擊a標簽，添加類border-none,再次點擊，刪除類border-none
解決方案1:
給你個例子吧
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
<title>show-hide</title>
<script src="JS/angular.min.js"></script>
<script>
var app = angular.mole('app', []);
app.controller('showHideController', function ($scope) {
$scope.isShow = true;
$scope.showorhide = function () {
$scope.isShow = !$scope.isShow;
}
});
</script>
<style>
.div {
border: 1px solid #0094ff;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div ng-c>this is a div which is show</div>

<button ng-click="showorhide()">按鈕</button>
</div>
</body>
</html>
我網上復制的。解決方案2:
ng-click 事件啊···然後在js裡面用jquery操作可能我這個方法有點low
解決方案3:
NG就用NG的思維啊，數據綁定才是正確的做法
用ng-class

以上介紹了「 angularjs怎樣實現Jq的addclass\removeclass」的問題解答，希望對有需要的網友有所幫助。

❹ 為什麼使用AngularJS 指令

使用過 AngularJS 的朋友應該最感興趣的是它的指令。現今市場上的前端框架也只有AngularJS 擁有自定義指令的功能，並且AngularJS 是目前唯一提供Web應用可復用能力的框架。
目前有很多JavaScript. 產品提供插件給Web開發人員。例如， Bootstrap 就是當前比較流行的提供樣式和JavaScript插件的前端開發工具包。但是開發人員在使用Booostrap中的插件時，必須切換到JavaScript. 模式來寫 jQuery 代碼來激活插件雖然jQuery 代碼寫起來十分簡單，但是必須和HTML進行同步，這是一個單調乏味且容易出錯的過程。
AngularJS主頁展示了一個簡單的例子，用於實現Bootstrap中的 Tab功能，可以在頁面中輕松添加 Tab 功能，並且使用方法和 ul 標簽一樣簡單。HTML代碼如下：
復制代碼

BootStrap Tab Component

This is the content of the first tab.

This is the content of the second tab.

復制代碼
JavaScript代碼如下：
復制代碼
angular.mole('components', []).
directive('tabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: [ "$scope", function($scope) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}
this.addPane = function(pane) {
if (panes.length == 0) $scope.select(pane);
panes.push(pane);
}
}],
template:
'
' +

'
' +

'
'+

'{{pane.title}}' +
'
' +

'
' +

'
' +

'
',

replace: true
};
}).
directive('pane', function() {
return {
require: '^tabs',
restrict: 'E',
transclude: true,
scope: { title: '@' },
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template:
'
' +

'
',

replace: true
};
})
復制代碼
你可以從以下鏈接查看效果：http://jsfiddle.net/powertoolsteam/GBE7N/1/
image
正如你所見，除了擁有用於實現指令的和標簽，頁面和常規HTML頁面沒有什麼區別。HTML開發人員無需編寫任何代碼。當然，總需要有第一個吃螃蟹的人，創建指令共享使用，但是目前Tabs指令已經很常見了，可以在任何地方復用（如BootStrap,、jQueryUI、Wijmo, 和一些知名的前端插件集）。
由於指令的易用和易編寫，許多用戶已經開始使用AngularJS編寫指令了。例如， AngularJS 開發組已經基於AngularJS實現了一系列指令-UI Bootstrap 來代替Bootstrap；知名ComponentOne 控制項廠商也在AngularJS 基礎上創建了Wijmo ；我們也可以在GitHub上找到一些公共指令資料庫：jQueryUI widgets。
擁有了 AngularJS，是不是覺得自己已經站在了巨人的肩膀上了？但是不要高興的太早，如果已經有了這么多的指令供我們使用，那我們為什麼還要學習AngularJS ，為什麼還要學習自定義指令呢？
舉個簡單的例子，也許你有特殊的需求：假設你在一家財務公司工作，你需要創建一張財務表單，它需要以表格的形式展示數據、擁有綁定、編輯、校驗並且同步數據更新到伺服器的功能。表單插件很常見但是能夠滿足這些具體需求的不得而知了，所以你必須根據實際業務需求來創建自定義指令。
復制代碼

Offshore Investment Summary

customer="currentCustomer"
country="currentCountry">

復制代碼
這就是本篇文章的目的，接下來我們會討論如何創建 AngularJS指令。
創建自定義AngularJS 指令
文章開頭的自定義指令十分的簡單。它僅僅實現了同步的功能。一般指令是包含更多元素的：
復制代碼
//創建指令模塊 (或者檢索現有模塊)
var m = angular.mole("myApp");
// 創建"my-dir"指令
myApp.directive("myDir", function() {
return {
restrict: "E", // 指令是一個元素 (並非屬性)
scope: { // 設置指令對於的scope
name: "@", // name 值傳遞（字元串，單向綁定）
amount: "=", // amount 引用傳遞（雙向綁定）
save: "&" // 保存操作
},
template: // 替換HTML (使用scope中的變數)
"
" +

" {{name}}: " +
" Save" +
"
",

replace: true, // 使用模板替換原始標記
transclude: false, // 不復制原始HTML內容
controller: [ "$scope", function ($scope) { … }],
link: function (scope, element, attrs, controller) {…}
}
});
復制代碼
效果如下：
image
注意這個自定義指令遵循一種格式：以"my" 為前綴，類似於命名空間，因此如果你在應用中引用了多個模塊指令，你可以通過前綴很容易的判斷出它是在哪定義的。這不是硬性要求，但是這樣做可以帶來很多便利。
指令的構造函數會返回帶有屬性的JavaScript. 對象。這些內容在AngularJS 主頁中都有清晰說明。以下是我對一些屬性的理解：
restrict: 說明指令在HTML中的應用形式，備選項有"A"、"E" 和 "C"， "M" ，分別代表 attribute、element、class和comment（默認值為"A"）。我們將更多的關注attributes-如何創建UI元素。
scope: 創建指令的作用范圍，scope在指令中作為屬性標簽傳遞。Scope 是創建可以復用指令的必要條件，每個指令（不論是處於嵌套指令的哪一級）都有其唯一的作用域，它不依賴於父scope。scope 對象定義names 和types 變數。上面的例子即創建了3個scope變數。
name: "@" （值傳遞，單向綁定）：
"@"符號表示變數是值傳遞。指令會檢索從父級scope中傳遞而來字元串中的值。指令可以使用該值但無法修改，是最常用的變數。
amount: "=" （引用,雙向綁定）
"="符號表示變數是引用傳遞。指令檢索主Scope中的引用取值。值可以是任意類型的，包括復合對象和數組。指令可以更改父級Scope中的值，所以當指令需要修改父級Scope中的值時我們就需要使用這種類型。
save: "&" (表達式)
「&」符號表示變數是在父級Scope中啟作用的表達式。它允許指令實現比修改值更高級的操作。
template: 替代原始模板中的標記的字元串。替換功能將替換所有舊元素為新值。注意template是如何使用Scope中定義的變數的。這允許你無需寫任何額外的代碼即可創建macro-style. 風格指令。replace: 說明是否替換原始標記中的值或是追加原始標記中的值。默認值是false，這時原始標記將被保留。
transclude: 說明自定義指令是否復制原始標記中的內容。例如，之前展示的「tab」指令設置了transclude 為 true，因為tab 元素包含其他HTML 元素。 "dateInput" 指令則需要在初始化時為空，所以需要設置transclude 為false。
link: 該方法在指令中扮演著重要的角色。它負責執行DOM 操作和注冊事件監聽器等。link 方法包含以下參數：
scope: 指令Scope的引用。scope 變數在初始化時是不被定義的，link 方法會注冊監視器監視值變化事件。
element: 包含指令的DOM元素的引用， link 方法一般通過jQuery 操作實例（如果沒有載入jQuery，還可以使用Angular's jqLite ）。
controller: 在有嵌套指令的情況下使用。這個參數作用在於把子指令的引用提供給父指令，允許指令之間進行交互， tab 指令就是使用該參數較典型的例子：http://jsfiddle.net/powertoolsteam/GBE7N/1/
注意，當調用link 方法時，通過值傳遞（"@"）的scope 變數將不會被初始化，它們將會在指令的生命周期中另一個時間點進行初始化，如果你需要監聽這個事件，可以使用scope.$watch 方法。

❺ AngularJs 如何實現多級聯動且最後一級下拉可以選擇多個選項。請附上正確例子

<select ng-model="selectedDistrict" ng-change="selectedUnit=''" ng-options="district.name for district in districts" class="ng-valid ng-dirty"></select>

<select ng-model="selectedUnit" ng-change="selectedPosition=''" ng-options="unit.name for unit in selectedDistrict.units" class="ng-valid ng-dirty"></select>
這個是兩級聯動。如果要多選，建議回你用插件答isteven-multi-select。

❻ 如何使用 TypeScript 編寫 AngularJS 的 Controller

AngularJS 有許多強大的特性，其中之一便是 Controller。在這篇文章里，我將介紹如何使用 TypeScript 去編寫 AngularJS 的 Controller。

Controller 通常用來增強 AngularJS 作用域（Scope）
。當一個 Controller 通過 ng-controller
指令連接到 DOM 上的時候，Angular 將使用指定的 Conroller 函數初始化一個新的 Controller 對象。一個新的子 scope 將被創建並作為 $scope
變數注入到 Controller 的構造函數當中。

有兩個選項將 Controller 連接到視圖當中，一種是 Controller 作為語法，另外一種是使用 $scope
。如果使用 Controller 語法，Controller 實例將被分配一個在新作用域上的屬性。

要想知道類型定義，看看這個令人吃驚的倉庫
，它收集了幾乎所有流行的 JavaScript 庫。這些類型定義可以讓我們得到任何編譯時錯誤和 IDE
的智能支持。我使用 Visual Studio 和 Visual Code，它們都對 TypeScript 有很好的支持。

正如上面提到的，AngularJS 只要在被請求的時候都將創建一個Controller 實例。所以，一個 Controller 可以使用
TypeScript 里的類去定義，就像我們所知道的，一個類是可以被實例化的。讓我們來使用在視圖里 Controller
作為語法的方法來定義一個 Dashboard Controller。下面的代碼沒有使用 $scope
服務。
interface IDashboardVm {
news: { title: string, description: string };
messageCount: number;
people: Array<any>;
title: string;
getMessageCount: () => ng.IPromise<number>;
getPeople: () => ng.IPromise<Array<any>>;
}

class DashboardController implements IDashboardVm {
static $inject: Array<string> = ['dataservice'];
constructor(private dataservice: app.core.IDataService) {
this.getMessageCount();
this.getPeople();
}

news = {
title: 'News',
description: 'Internal server team is excited about AngularJS, TypeScript & JavaScript'
};
messageCount: number = 0;
people: Array<any> = [];
hubsSummary: Array<any> = [];
title: string = 'Dashboard';

getMessageCount() {
return this.dataservice.getMessageCount().then((data) => {
this.messageCount = data;
return this.messageCount;
});
}

getPeople() {
return this.dataservice.getPeople().then((data) => {
this.people = data;
return this.people;
});
}
}

angular.mole('app.dashboard').controller('DashboardController', DashboardController);

利用 TypeScript 的強類型特徵，最好創建一個包含所有和視圖相關成員和行為的介面。這就可以使為一個 Controller 定義實現變得容易，而且這個介面如果需要就可以做成一個抽象方法在其他地方使用了。所以，上面代碼里我創建了一個名為 IDashboardVm
的介面。

接著，名為 DashboardController
的 Controller 實現了這個介面並給每個成員定義了默認狀態。看這個類的靜態變數 $inject
，它告訴了 AngularJS DI
在初始化這個 Controller 之前注入哪些依賴。然後構造器在需要的依賴的相同順序定義了參數當它們被注入到那些參數的時候。

類所提到的依賴都是相當直接了當的，假設 dataservice
是一個自定義的 AngularJS 服務，它封裝了所有對伺服器發起的 HTTP 請求。根據介面里的每個定義，接下來我們要為這些行為定義實現，內部調用 dataservice
方法。它使用了 promises
去返回待會兒要分配到 Controller 成員上去控制狀態的響應。

真正重要的是要注意使用 Angular 的模塊 API 注冊這個 Controller
的位置。上面的代碼里，首先定義了類然後完成其注冊。如果這個順序交換的話，Angular 就將找不到我們這個 Controller
的實現了。當使用一個 JavaScript 構造函數就可以很好地解決問題，因為函數提升起到了很重要的作用
。

下面是這個 Controller 如何在 Angular-UI UI-Router
中使用的代碼片段，但如果你想使用 Angular 內置路由模塊的話概念是一樣的。注意，這只展示了使用 controllerAs
語法進行配置的部分。
config: {
url: '/',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'DashboardController',
controllerAs: 'vm',
title: 'dashboard',
}

如果你想使用 $scope
服務的話，那麼就可以像下面的代碼片段那樣擴展上面的介面。這將確保所有 IScope 有的成員可以通過介面訪問到。使用這個方法還需要改變一下 Controller 類的實現，因為現在它需要 $scope
服務的依賴了。自定義介面類型接著就可以在構造器使用 $scope
參數獲得強類型和智能支持了。
interface IDashboardVm extends angular.IScope {
news: { title: string, description: string };
messageCount: number;
people: Array<any>;
title: string;
getMessageCount: () => ng.IPromise<number>;
getPeople: () => ng.IPromise<Array<any>>;
}

導航:首頁 > 編程語言 > angularjs切換class

angularjs切換class

與angularjs切換class相關的資料

友情鏈接