Tag: angularjs

AngularJS:绑定自定义样式的htmlstring

我想绑定一个自定义风格的HTMLstring到DOM。 但是, ngSanitize会从string中删除样式。 例如: 在控制器中: $scope.htmlString = "<span style='color: #89a000'>123</span>!"; 在DOM中: <div data-ng-bind-html="htmlString"></div> 将省略样式属性。 结果将如下所示: <div data-ng-bind-html="htmlString"><span>123</span>!</div> 代替: <div data-ng-bind-html="htmlString"><span style='color: #89a000'>123</span>!</div> 问题:我怎样才能做到这一点?

在ng-repeat中由ng-click调用的赋值expression式的行为

我试图用ng-click来更新我的模型,附加到<p> 。 我在ng-repeat 之外的赋值expression式,或者在ng-repeat 内部调用一个scope方法都没有问题。 但是,如果我在ng-repeat使用了一个赋值,它似乎被忽略了。 我在Firefox控制台中看不到任何消息,但没有尝试设置断点以查看事件是否正在触发。 <!DOCTYPE html> <html> <head> <title>Test of ng-click</title> <script type='text/javascript' src='http://code.angularjs.org/1.1.1/angular.js'></script> <script type='text/javascript'>//<![CDATA[ function MyCtrl($scope) { $scope.selected = ""; $scope.defaultValue = "test"; $scope.values = ["foo", "bar", "baz"]; $scope.doSelect = function(val) { $scope.selected = val; } } //]]> </script> </head> <body ng-app> <div ng-controller='MyCtrl'> <p>Selected = {{selected}}</p> <hr/> <p ng-click='selected […]

如何用Angular.js实现分页/表格布局?

比方说,我收到了15+对象的对象文字,我需要在一个不错的布局(不是所有的行)中显示它们,什么是最有效的方法来控制行应该打破/页面应该结束? 现在我在表行上使用了ng-repeat,结果是一列很长的一列。 编辑澄清。 可以有对象内的对象/更多的参数。 这是我的目标: $scope.zones = [ {"name": "Zone 1", "activity": "1"}, {"name": "Zone 2", "activity": "1"}, {"name": "Zone 3", "activity": "0"}, {"name": "Zone 4", "activity": "0"}, {"name": "Zone 5", "activity": "0"}, {"name": "Zone 6", "activity": "0"}, {"name": "Zone 7", "activity": "1"}, {"name": "Zone 8", "activity": "0"}, {"name": "Zone 9", "activity": "0"}, {"name": "Zone […]

input模型在更改时从整数更改为string

有一种基于input模型的价格范围/评级function。 在加载时,当它从后端设置时,它以一个整数开始,但是当你键入它时,它将变成一个string。 Angular有没有什么方法将input的值声明为整数? HTML: <input type="text" name="sellPrice" id="sellPrice" class="sell-price" data-ng-model="menu.totalPrice" data-ng-change="updateMenuPriceRange()"required> JS: $scope.updateAggregatePricing(); if ($scope.menu.totalPrice === 0) { $scope.menuPriceRange = ""; } else if ($scope.menu.totalPrice < 10) { $scope.menuPriceRange = "$"; } else if ($scope.menu.totalPrice >= 10 && $scope.menu.totalPrice <= 12.50) { $scope.menuPriceRange = "$$"; } else if ($scope.menu.totalPrice >= 12.51 && $scope.menu.totalPrice < 15) […]

在iFrame上的angular度,onLoad函数

我有这个iframe使用基本的JavaScript: <iframe id="upload_iframe" name="upload_iframe" onLoad="uploadDone();"></iframe> 触发方法uploadDone(); 当iframe的内容已被加载时。 我如何在Angular中做同样的事情? 我想在iframe加载的时候在控制器上调用一个函数,但是到目前为止我还没有看到ng-onload 。

$ http请求不会在angular度CORS中跨域发送cookie

首先我想告诉我已经阅读了Stack的所有问题以及与CORS相关的所有问题,但是实现仍然不起作用。 我的APPbuild立在angular度粗暴的演示之上: 所以我有在应用程序configuration: $httpProvider.defaults.useXDomain = true; $httpProvider.defaults.withCredentials = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; 我知道他们正确设置(debugging)。 在我的“安全”应用程序中,我正在为当前用户请求跨域: return $http.get(LAYOUT_CONFIG.baseURL + '/current-user').then(function(response) { //service.currentUser = response.data.user; service.currentUser = response.data; return service.currentUser; }); 我在第一个请求中获得这些标头: Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:accept, origin, content-type, cookie Access-Control-Allow-Methods:GET,POST Access-Control-Allow-Origin:http://admin.vibetrace.com Access-Control-Max-Age:1728000 Connection:keep-alive Content-Encoding:gzip Content-Type:text/html; charset=utf-8 Date:Sun, 02 Jun 2013 11:07:49 GMT P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi […]

如何从作为可重用组件的指令公开API?

有一个angular度是一个可重用组件的指令,公开的API可以从控制器访问的最佳做法是什么? 所以当有多个组件的实例时,你可以从控制器访问 angular.directive('extLabel', function { return { scope: { name: '@', configObj: '=' }, link: function(scope, iElement, iAttrs) { // this could be and exposed method scope.changeLabel = function(newLabel) { scope.configObj.label = newLabel; } } } }); 然后当有: <ext-label name="extlabel1" config-obj="label1"></ext-label> <ext-label name="extlabel2" config-obj="label2"></ext-label> <ext-label name="extlabel3" config-obj="label3"></ext-label> 我怎样才能访问控制器中的extLabel2的scope.changeLabel? 是否有意义?

如何在ngRepeat数组之间的AngularJS中推送对象

所以我是AngularJS的新手,我正在尝试构build一个非常简单的列表应用程序,我可以在其中创build一个ng-repeat项目列表,然后将所选项目推送到另一个ng-repeat列表中。 虽然我的问题似乎很简单,但我还是无法find合适的解决scheme。 所以这是简化的标记: <body ng-app="MyApp"> <div id="MyApp" ng-controller="mainController"> <div id="AddItem"> <h3>Add Item</h3> <input value="1" type="number" placeholder="1" ng-model="itemAmount"> <input value="" type="text" placeholder="Name of Item" ng-model="itemName"> <br/> <button ng-click="addItem()">Add to list</button> </div> <!– begin: LIST OF CHECKED ITEMS –> <div id="CheckedList"> <h3>Checked Items: {{getTotalCheckedItems()}}</h3> <h4>Checked:</h4> <table> <tr ng-repeat="item in checked" class="item-checked"> <td><b>amount:</b> {{item.amount}} -</td> <td><b>name:</b> {{item.name}} -</td> […]

Promise.all与RxJS Observables的行为?

在Angular 1.x中,我有时需要做出多个http请求,并对所有的响应进行处理。 我将所有的承诺放在一个数组中,并调用Promise.all(promises).then(function (results) {…}) 。 Angular 2的最佳实践似乎指向使用RxJS的Observable来代替http请求中的承诺。 如果我有两个或更多不同的Observable从http请求创build,他们相当于Promise.all() ?

到$ routeProvider或$ stateProvider

我一直在寻找一个合理的答案来解决这个困境,以便提供者或不。 看起来好像$ routeProvider即将停止,并用$ stateProviderreplace,不幸的是,我不知道这个语句的准确性,加上stateProvider仍然只能通过ui_router插件使用。 是计划添加stateProvider作为AngularJS核心的一部分? 假设它将很快replace旧的$ routeProvider是否保存? 他们当然不能很好地协作,我在github中find的迁移configuration文件不起作用,缺less文档。