我正在使用Angular Material.我已经成功创建了一个导航栏和一个下拉菜单.

它看起来像这样：

我想将DROPDOWN移到左侧.现在,它出现在中心周围.

HTML代码：

如何修改代码以将DROPDOWN移动到文本Material NavBar旁边的左侧？

解决方法

我在Jasmine和Karma中有很多依赖于$httpBackend HTTP模拟检查的测试.当我今天升级Angular时,他们停止了工作.

假设我的Jasmine测试中有这样的东西：

// Arrange
    httpBackend.expect('POST','https://localhost:44300/api/projects/1/samples').respond(fakedDto);
    // Act
    scope.updateSamples();
    httpBackend.flush();

在最后一行,这是完全可以的,我收到：

TypeError: $browser.$$checkUrlChange is not a function in C:/SVN/samplemgmt/src/ClientApp/client/bower_components/angular/angular.js (line 12502)
$RootScopeProvider/this.$get</Scope.prototype.$digest@C:/SVN/samplemgmt/src/ClientApp/client/bower_components/angular/angular.js:12502:9
createHttpBackendMock/$httpBackend.flush@C:/SVN/samplemgmt/src/ClientApp/client/bower_components/angular-mocks/angular-mocks.js:1481:5
@C:/SVN/samplemgmt/src/ClientApp/tests/integration/sample/samplecreationController_integration.test.js:341:9

此外,我有通常的配置来结束测试：

afterEach(function () {
    httpBackend.verifyNoOutstandingExpectation();
    httpBackend.verifyNoOutstandingRequest();
});

现在开始生成以下错误：

Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.2.25/$rootScope/inprog?p0=%24digest in C:/SVN/samplemgmt/src/ClientApp/client/bower_components/angular/angular.js (line 78)
minerr/<@C:/SVN/samplemgmt/src/ClientApp/client/bower_components/angular/angular.js:78:5
beginPhase@C:/SVN/samplemgmt/src/ClientApp/client/bower_components/angular/angular.js:13009:9
$RootScopeProvider/this.$get</Scope.prototype.$digest@C:/SVN/samplemgmt/src/ClientApp/client/bower_components/angular/angular.js:12500:9
createHttpBackendMock/$httpBackend.verifyNoOutstandingExpectation@C:/SVN/samplemgmt/src/ClientApp/client/bower_components/angular-mocks/angular-mocks.js:1514:5
@C:/SVN/samplemgmt/src/ClientApp/tests/integration/sample/samplecreationController_integration.test.js:137:9

我很欣赏一些如何让事情再次发挥作用的建议.最近是否对httpBackend测试做了任何更改？

对于那些坚持使用旧版Angular并且由于某种原因无法在此时升级的人来说,here是一个很好的帖子,它解释了正在发生的事情以及如何解决问题.

总结一下 –

出现此问题是因为$httpBackend.flush()和$httpBackend.verifyNoOutstandingExpectation()错误地尝试进行摘要.显然,内部的(来自verifyNoOutstandingExpectation()调用)失败.幸运的是,我们可以指示它不要执行摘要 – 请注意错误的参数：

afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation(false); // <-- here
    $httpBackend.verifyNoOutstandingRequest();
});

我正在创建一个我正在创建的桌子上的角度分页.

我已经完成了文档.但是,我没有看到如何将分页连接到表.我的分页大小与数组大小匹配.它们是用于页面页面长度的正确数量的按钮链接.然而,我的桌子仍然是全长的,因此我无法测试我的分页.

这是我的桌子

<tbody>
                <tr ng-repeat="drink in editableDrinkList | orderBy:'-date'"> 
                    <td>[[drink.name]]</td>
                    <td>[[drink.date |date: format :timezone]]</td>
                    <td>[[drink.caffeineLevel]]</td>
                    <td>
                        <a ng-click="delete(drink._id)">
                            <i></i>
                        </a>

                        <a href="" ng-click="update(drink)">
                            <i></i>
                        </a>
                    </td>
                </tr>
     </tbody>

我已将表格体设置在表格标签之外,我在里面试过但是我的分页控件没有出现.

这是我的分页

<pagination  
        total-items="totalItems" 
        ng-model="currentPage" 
        items-per-page="itemsPerPage" 
        ng-change="pageChanged()" 
        ng-click="setPage(currentPage)">
</pagination>

我还设置了一个p标签,以确保标签响应

<div> 
        <p>total Items [[totalItems]]</p>
        <p>itemsPerPage [[itemsPerPage]]</p>
        <p>current page [[currentPage]]</p>
    </div>

paragraphare内的总项目,每页项目和当前页面都响应分页控制器上的每次点击.然而,表格没有变化.

这是我的控制器

var editabledrinkSet = function(){
      editableArray = [];

      DrinkLibrary.getAllDrinks().success(function(data){
        for (var i = 0; i < data.length; i++) {
          if(data[i].editable) {
            editableArray.push(data[i])
          };
        };
        $scope.currentPage = 1;
        $scope.totalItems = editableArray.length;

        $scope.itemsPerPage =10;
        $scope.maxSize = 3;

        $scope.setPage = function(pageNo) {
          $scope.currentPage = pageNo;
        }
        $scope.pageChanged = function() {
          $log.log('Page changed to: ' + $scope.currentPage);
        };

        $scope.editableDrinkList = editableArray;
      });
    };

当我开始工作时,我会将大部分内容转移到指令中.我只想先把它设置好.

您可以使用自定义过滤器执行此操作.

将自定义过滤器添加到ngRepeat

您需要能够告诉重复哪个索引将成为每个页面的起点以及要在页面上包含的项目数.您可以通过创建一个简单的过滤器(我称之为页面)来完成此操作.此过滤器将使用您已在控制器中设置的currentPage和itemsPerPage值.

<tr ng-repeat="drink in editableDrinkList | orderBy:'-date' | pages: currentPage : itemsPerPage">

创建自定义筛选器

要创建自定义筛选器,请传入名称,然后传递返回工作函数的工厂函数. worker函数自动接收输入数组作为其第一个值.后续值是您在过滤器中指定的值.

因此,页面过滤器获取输入数组以及传递给它的两个值(currentPage和pageSize).然后你只需使用Array.slice将新数组返回到repeat.请记住,过滤器是非破坏性的.它们不会更改实际的范围数组.他们正在为重复使用创建一个新数组.

app.filter('pages',function() {
  return function(input,currentPage,pageSize) {
    //check if there is an array to work with so you don't get an error on the first digest
    if(angular.isArray(input)) {
      //arrays are 0-base,so subtract 1 from the currentPage value to calculate the slice start
      var start = (currentPage-1)*pageSize;
      //slice extracts up to,but not including,the element indexed at the end parameter,//so just multiply the currentPage by the pageSize to get the end parameter
      var end = currentPage*pageSize;
      return input.slice(start,end);
    }
  };
});

将分页指令添加到页面

这是您将添加到html中的指令的清理版本.不要在分页指令上使用某种ngClick或ngChange. ngModel设置为currentPage变量,因此您无需做任何其他事情.由于currentPage是通过ngModel双向绑定的,因此当它更改时,分页指令将更新以及页面过滤器,这将反过来更新重复的表行.

<pagination  
    total-items="totalItems" 
    ng-model="currentPage" 
    items-per-page="itemsPerPage"
    max-size="maxSize">
</pagination>

就这么简单.如果您想查看工作演示,请检查Plunker.

Plunker

我有以下 Angular UI-Bootstrap typeahead工作很棒：

<inputtype="text" ng-model="selectedStuff" typeahead="stuff as stuff.name for stuff in stuffs | filter:$viewValue"/>

尽管如此，它几乎工作得太好了。我可以显示stuffs.name为目的的目的，并选择完整的东西对象的东西。问题是我的$ viewValue匹配所有的东西属性，而不仅仅是stuff.name。我已经尝试将.name添加到typeahead的各个地方，没有运气。有没有一种简单的方式来显示和匹配只有.name但仍然返回整个对象？

来自 http://angular-ui.github.io/bootstrap/ repo的typahead指令的构建很适合现有的AngularJS生态系统。这意味着该指令尝试尽可能多地重复使用AngularJS中已经使用的语法，过滤器和指令。

回到你的问题 – 过滤本身就是由Angular过滤器完成的：http://docs.angularjs.org/api/ng.filter:filter上述过滤器的语法足够灵活，可将搜索限制到一组选定的属性：

typeahead="stuff as stuff.name for stuff in stuffs | filter:{name: $viewValue}"

请注意：filter：{name：$ viewValue}

这里工作的朋友：http://plnkr.co/edit/o1qWKq8LSmbbmVaYkOvb?p=preview