标签: angularjs-bootstrap

我想创建一个带有pre标签的bootstrap popover,其中包含一个美化的JSON对象.天真的实施,

<span popover='<pre>{[ some_obj | json:"  " ]}</pre>'
      popover-trigger='mouseenter'>

在将内容插入弹出窗口之前将其转义.使用html内容指定弹出框体的最佳方法是什么？

我正在使用ui-bootstrap typeahead.它的工作非常出色!但是,我想知道是否可以在结果列表中显示多个属性甚至HTML.典型问题:搜索返回多个具有相同值的对象.例如,寻找'惊人的恩典'回归['惊人的恩典','惊人的优雅'],其中一个是电影,一个是歌曲.我希望结果列表更像:

amazing grace | movie
amazing grace | song

...所以用户确切地知道他们正在选择什么.更好的是标题旁边的图标.换句话说,列表中的每个结果都包含一些HTML.这些都可以开箱即用吗？

我想知道是否有可能在angularjs bootstrap tabset选项卡标题内编写html.我想在标题中添加一个svg.我已经在plunker中创建了一个快速片段来尝试演示我遇到的问题.

<tabset>
  <tab heading="<span>hello</span><em>1</em>">One</tab>
  <tab heading="Two">Two</tab>
  <tab heading="Three">Three</tab>
</tabset>

http://plnkr.co/edit/qFsFGDNUIJj9nIF51ApU

有任何想法吗？

谢谢

在我的AngularJS项目中,我使用正常的选择下拉列表并使用ng-change进行函数调用,这完全正常.现在我想将相同的下拉列表迁移到ui-select.但是on-select函数调用不起作用,我尝试了不同的方法,但没有运气.请找我的plnkr

以下是我用ui-select尝试的两种方式:

<ui-select ng-model="uiSelectedCustomer" theme="select2" on-select="getDataBasedonCustomer(uiSelectedCustomer)" style="min-width: 300px;">
    <ui-select-match placeholder="Select a customer..">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="cust in customers | filter: $select.search">
        <div ng-bind-html="cust.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>


<ui-select ng-model="uiSelectedCustomer" theme="select2" on-select="getDataBasedonCustomer(uiSelectedCustomer)" style="min-width: 300px;">
    <match placeholder="Select a customer in the list or search his name ">{{$select.selected.name}}</match>
    <choices repeat="cust in customers | filter: $select.search">
        <div ng-bind-html="cust.name | highlight: $select.search"></div>
    </choices>
</ui-select>

我有一个带有ASP.NET应用程序的iframe,它包含UpdatePanel.我开始在应用程序中使用Angular,但是因为.NET回发而无法正常工作.

要解决这个问题,我使用了这个解决方案

with (Sys.WebForms.PageRequestManager.getInstance()) {
            add_endRequest(onEndRequest); // regester to the end Request
        }

function onEndRequest(sender, args) {
    angular.bootstrap($('#mainDiv'), ['defaultApp']);
    var rootscope = angular.element('#mainDiv').scope();
    if (rootscope) {
        rootscope.$apply();
    }
}

而且效果很好.

问题是当我在ASP.NET页面中使用另一个ng-controller动态加载不同的用户控件时,Angular会抛出一个错误,说明该应用已经加载:

App Already Bootstrapped with this Element

所以问题是:我如何检查应用程序是否已经自举？我可以重装这个模块吗？我可以从元素中删除它而不是再次引导它吗？

谢谢.

我这里有一个泡菜.我必须通过webservice调用获取我的多级导航菜单.

由于我的导航菜单中可以包含无限量的子菜单,因此我不得不使用递归指令来构建我的父/子导航结构.现在我想弄清楚如何将它变成一个功能性的dropmenu结构.我正在看看angularui-bootstrap,他们有一个Dropdown Toggle,它有一些基本的dropmenu功能,但由于我使用了递归指令,我的菜单结构已经有了angularjs生成的css类附加到它们.angularjs-bootstrap dropmenu有css类,它们与我的angularjs生成的类不同....看哪!

<ul>
    <li ng-repeat="parent in parents" class="ng-scope">
        <recursive-list-item on-node-click="onNodeClickFn(node)" parent="parent" class="ng-isolate-scope ng-scope">
            <a data-ng-click="onNodeClick({node: parent})" href="javascript:void(0)" class="ng-scope ng-binding">Clothes</a>
            <!-- ngIf: parent.children.length > 0 -->
            <ul data-ng-if="parent.children.length &gt; 0" class="ng-scope">
                <!-- ngRepeat: child in parent.children -->
                <li ng-repeat="child in parent.children" class="ng-scope">
                    <recursive-list-item data-on-node-click="onNodeClickFn(node)" data-parent="child" class="ng-isolate-scope ng-scope">
                        <a data-ng-click="onNodeClick({node: parent})" href="javascript:void(0)" class="ng-scope ng-binding">Gortex Jackets</a>
                        <!-- ngIf: parent.children.length > 0 -->
                    </recursive-list-item>
                </li>
                <!-- end ngRepeat: child in parent.children -->
                ...
                ...
                ...
            </ul>
        </recursive-list-item>
    </li>
    <!-- end ngRepeat: child …

如何为AngularJS 1.3.8使用多个控制器？

我已经尝试过以下内容,但只有第一个控制器输出正确,第二个控制器输出{{ name }}和{{ age }}.

HTML:

<div ng-app="app" ng-controller="Ctrl">
    <label>Name:</label>
        <input ng-model="name">
    <label>Age:</label>
        <input ng-model="age">
    <h1>{{ name }}</h1>
    <h1>{{ age * 2 }}</h1>
</div>

<div ng-app="app2" ng-controller="Ctrl2">
    <label>Name:</label>
        <input ng-model="name">
    <label>Age:</label>
        <input ng-model="age">
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
</div>

<script>
    angular.module('app', [])
        .controller('Ctrl', ['$scope', function($scope) {
            $scope.name = "Jason";
            $scope.age = "21";
            $scope.$watch('name', function(){ // Logs the amount of times name changes
               console.log($scope.name);
            });
        }]);
</script>

<script>
    angular.module('app2', [])
        .controller('Ctrl2', ['$scope', function($scope) { …

是否可以[执行一个功能]例如在请求某个路径时从routeProvider打开一个模态对话框窗口？

myApp.config(function($routeProvider) {
    $routeProvider
        .when('/home',
            {
                controller: 'HomeCtrl',
                templateUrl: 'Home/HomeView.html'
            }
        ).when('/profile/:userId/changepwd',
            function(){                
                $dialog.messageBox(title, msg, btns)
                    .open()
                    .then(function(result){
                    alert('dialog closed with result: ' + result);
                });
            }
        ).otherwise({ redirectTo: '/home' });
});

PS:我想取消路线,而是打开一个对话框.打开对话框不是唯一的问题.取消路线是主要问题.

这是场景:

我正在使用带有Angular JS和Boostrap UI的ASP.NET MVC站点.我有一个动态ul列表,由通过控制器调用AngularJS提供的数据填充,通过输入搜索框过滤该列表.该列表还通过分页(UI Bootstrap控件)进行控制,我已设置为每页显示10个结果,列出100个左右的项目.当用户在搜索框中键入时,此列表会被过滤,但我希望更新分页,因此请考虑以下示例:

该列表有10页项目(100项),用户在输入搜索框中键入一些文本,将列表过滤到20个左右的项目,因此分页应从10页更新为2页.

我认为必须在某个地方设置一个$ watch设置,可能在列表项目被过滤后再更新分页页数,但是我对AngularJS很新,所以有人可以向我解释如何做到这一点吗？

非常感谢.我在下面发布了我的代码:

<div data-ng-app="dealsPage">
<input type="text" data-ng-model="cityName" />
<div data-ng-controller="DestinationController">
    <ul>
        <li data-ng-repeat="deals in destinations | filter: cityName |
            startFrom:currentPage*pageSize | limitTo:pageSize">{{deals.Location}}</li>
    </ul>
    <br />
    <pagination rotate="true" num-pages="noOfPages" current-page="currentPage" 
                max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>
</div>

 var destApp = angular.module('dealsPage', ['ui.bootstrap', 'uiSlider']);
destApp.controller('DestinationController', function ($scope, $http) {
    $scope.destinations = {};
    $scope.currentPage = 1;
    $scope.pageSize = 10;

    $http.get('/Deals/GetDeals').success(function (data) {
        $scope.destinations = data;
        $scope.noOfPages = data.length / 10;
        $scope.maxSize = 5;
    });
});

destApp.filter('startFrom', function () …

是否有uib-tab指令的回调函数我可以用来在呈现选项卡后刷新内部指令？

我试图找到一个问题的来源,当我在angular-bootstrap提供的uib-tab指令中使用该指令时出现第三方指令.第三方指令是angular-multi-slider,该问题首先在该存储库中报告.

plnkr中提供了一个用例.单击第二个选项卡,您将看到内部滑块的所有手柄都位于其他手柄之上(即widths = 0px).然后单击其中一个手柄,它将正确显示.即使遵循了有关FAQ中范围的建议,问题仍然存在.

角度应用程序

'use strict';

angular.module('multiSliderDemo', ['angularMultiSlider', 'ngAnimate', 'ui.bootstrap']);

angular.module('multiSliderDemo')
  .controller('DemoCtrl', function ($rootScope, $scope, $sce, $uibModal) {
    var s = [
                {value: 2, title:"Brainstorming", component: "Proposal Making", 
                   symbol: $sce.trustAsHtml("1")},
                {value: 50, title:"Working groups formation", component: "Proposal Making", 
                   symbol: $sce.trustAsHtml("2")},
                {value: 100, title:"Proposal drafting",component:"Proposal Making", 
                   symbol: $sce.trustAsHtml("3")},
                {value: 130, title:"Proposal editing", component: "Versioning", 
                   symbol: $sce.trustAsHtml("4")},
                {value: 160, title:"Proposal selection", component: "Versioning", 
                   symbol: $sce.trustAsHtml("5")},
                {value: 200, title:"Discussion of proposals", component: …