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相关的资料

友情链接