标签: angularjs-ng-repeat

Angular JS过滤器不等于

看起来像一个非常基本的问题,但我无法正确的语法..

<li class="list-group-item" ng-repeat="question in newSection.Questions | filter:Id != '-1'; " ng-mouseenter="hover = true" ng-mouseleave="hover = false">
    <div href="#" editable-text="question.Text">{{question.Text}}</div>
</li>
Run Code Online (Sandbox Code Playgroud)

我想要的只是显示id为非-1的所有问题.我究竟做错了什么.谢谢!

javascript angularjs angularjs-ng-repeat ng-filter

81
推荐指数
2
解决办法
9万
查看次数

通过布尔属性使用"track by"过滤Angular 1.2 ng-repeat

我正在尝试根据布尔属性的值过滤一些列表项,但无论我做什么,总是会显示整个列表.我尝试过的一些东西已经破碎,没有任何东西显示出来,但这既不在这里,也不在那里.我不能按要求让我的过滤工作:

$scope.attendees = [
     {"firstname":"Steve",    "lastname":"Jobs",  "arrived":true,  "id":1}
    ,{"firstname":"Michelle", "lastname":"Jobs",  "arrived":false, "id":2}
    ,{"firstname":"Adam",     "lastname":"Smith", "arrived":true,  "id":3}
    ,{"firstname":"Megan",    "lastname":"Smith", "arrived":false, "id":4}
    ,{"firstname":"Dylan",    "lastname":"Smith", "arrived":false, "id":5}
    ,{"firstname":"Ethan",    "lastname":"Smith", "arrived":false, "id":6}
];
Run Code Online (Sandbox Code Playgroud)

使用以下ng-repeat过滤:

<ul>
    <li ng-repeat="person in attendees track by person.id | filter:arrived:'false'">
            {{person.lastname}}, {{person.firstname}}
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我觉得我已经尝试过我可以找到的每个排列,其中大多数来自各种StackOverflow搜索结果:

  • filter:'arrived'
  • filter:arrived
  • filter:'person.arrived'
  • filter:person.arrived
  • filter:{arrived:true}
  • filter:{arrived:'true'}
  • filter:{person.arrived:true}
  • filter:{person.arrived:'true'}

我也尝试过创建自定义过滤器功能:

$scope.isArrived = function(item) {
    return item.arrived;
};
Run Code Online (Sandbox Code Playgroud)

并应用它:

  • filter:isArrived
  • filter:'isArrived'
  • filter:{isArrived(person)}
  • filter:isArrived(person)
  • filter:'isArrived(person)'

这些似乎都不起作用.我错过了什么?

这是一个展示我问题的plnkr.

angularjs angularjs-ng-repeat

78
推荐指数
1
解决办法
4万
查看次数

angularjs ng-style:background-image不起作用

我正试图通过使用角度将背景图像应用于div ng-style(我之前尝试过使用相同行为的自定义指令),但它似乎不起作用.

<nav
    class="navigation-grid-container"
    data-ng-class="{ bigger: isNavActive == true }"
    data-ng-controller="NavigationCtrl"
    data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true"
    data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false"
    data-ng-show="$parent.navInvisible == false"
    data-ng-animate="'fade'"
    ng-cloak>

    <ul class="navigation-container unstyled clearfix">
        <li
            class="navigation-item-container"
            data-ng-repeat="(key, item) in navigation"
            data-ng-class="{ small: $parent.isNavActive, big: isActive == true }"
            data-ng-mouseenter="isActive = true; isInactive= false"
            data-ng-mouseleave="isActive = false; isInactive= true">

            <div data-ng-switch on="item.id">

                <div class="navigation-item-default" data-ng-switch-when="scandinavia">
                    <a class="navigation-item-overlay" data-ng-href="{{item.id}}">
                        <div class="navigation-item-teaser">
                            <span class="navigation-item-teaser-text" data-ng-class="{ small: isScandinavia }">{{item.teaser}}</span>
                        </div>
                    </a>
                    <span class="navigation-item-background" data-ng-style="{ 'background-image': …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angularjs-directive angularjs-ng-repeat ng-style

76
推荐指数
4
解决办法
11万
查看次数

Angular - 无法使ng-repeat orderBy工作

我已经尝试了许多使用orderBy进行ng-repeat的例子,但我不能让我的json使用它.

<div ng-app>
    <script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
    <div ng:controller="Main">
        <div ng-repeat="release in releases| orderBy:'environment_id'">      
            {{release.environment_id}}
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

还有JSON

function Main($scope) {
$scope.releases = {
    "tvl-c-wbap001 + tvl-webapp": {
        "timestamp": " 05:05:53 PM ",
        "environment_id": "CERT5",
        "release_header": "Projects/Dev",
        "date": "19 Oct",
        "release": "12.11.91-1"
    },
    "tvl-c-wbap401 + tvl-webapp": {
        "timestamp": " 10:07:25 AM ",
        "environment_id": "CERT4",
        "release_header": "Future Release",
        "date": "15 Oct",
        "release": "485-1"
    },
    "tvl-c-wbap301 + tvl-webapp": {
        "timestamp": " 07:59:48 AM ",
        "environment_id": "CERT3",
        "release_header": "Next Release",
        "date": "15 Oct", …
Run Code Online (Sandbox Code Playgroud)

javascript json angularjs angularjs-ng-repeat

70
推荐指数
4
解决办法
14万
查看次数

如何从angular.js数组中删除元素/节点

我试图从数组中删除元素,$scope.items以便在视图中删除项目ng-repeat="item in items"

仅出于演示目的,这里有一些代码:

for(i=0;i<$scope.items.length;i++){
    if($scope.items[i].name == 'ted'){
      $scope.items.shift();
    }
}
Run Code Online (Sandbox Code Playgroud)

如果有名称ted,我想从视图中删除第一个元素?它工作正常,但视图重新加载所有元素.因为所有数组键都已移位.这在我创建的移动应用程序中造成了不必要的延迟.

任何人都有这个问题的解决方案?

scope angularjs angularjs-ng-repeat

69
推荐指数
7
解决办法
26万
查看次数

在ng-repeat中使用ng-if?

我正在开发Angular应用程序.我尝试使用ng-if并在ng-repeat内切换,但没有成功.我有以下数据:

   **[{"_id":"52fb84fac6b93c152d8b4569",
       "post_id":"52fb84fac6b93c152d8b4567",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"hoot",},  
      {"_id":"52fb798cc6b93c74298b4568",
       "post_id":"52fb798cc6b93c74298b4567",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"story",},        
      {"_id":"52fb7977c6b93c5c2c8b456b",
       "post_id":"52fb7977c6b93c5c2c8b456a",
       "user_id":"52df9ab5c6b93c8e2a8b4567",
       "type":"article",},**
Run Code Online (Sandbox Code Playgroud)

$ scope.comments =上面提到的数据
和我的Html一样:

   <div ng-repeat = "data in comments">
      <div ng-if="hoot == data.type">
          //differnt template with hoot data
       </div>
      <div ng-if="story == data.type">
          //differnt template with story data
       </div>
       <div ng-if="article == data.type">
          //differnt template with article data
       </div> 
   </div>
Run Code Online (Sandbox Code Playgroud)

我怎样才能在Angular中实现这个功能?

dom angularjs laravel-4 angularjs-ng-repeat angularjs-ng-if

67
推荐指数
3
解决办法
17万
查看次数

嵌套在懒惰的一次性ng-repeat绑定内部只绑定一次吗?

我的理解是,在下面的代码中,两个绑定都只会懒惰地绑定一次:

<li ng-repeat="item in ::items">{{::item.name}}</li>
Run Code Online (Sandbox Code Playgroud)

但是,在以下情况下每个摘要都会{{item.name}}更新?

<li ng-repeat="item in ::items">{{item.name}}</li>
Run Code Online (Sandbox Code Playgroud)

如何一次性约束力嵌套的ng-repeat小号

<li ng-repeat="item in ::items">
  <span ng-repeat="thing in item.things">{{thing.name}}</span>
</li>
Run Code Online (Sandbox Code Playgroud)

binding angularjs angularjs-ng-repeat

67
推荐指数
1
解决办法
2万
查看次数

AngularJS:列出所有表单错误

背景:我目前正在开发一个带标签的应用程序; 并且我想列出未通过验证的字段/部分,以指示用户在右侧选项卡中查找错误.

所以我试图利用form.$error这样做; 但我还没有完全搞定它.

如果在a内发生验证错误ng-repeat,例如:

<div ng-repeat="url in urls" ng-form="form">
  <input name="inumber" required ng-model="url" />
  <br />
</div>
Run Code Online (Sandbox Code Playgroud)

空值导致form.$error包含以下内容:

{ "required": [
  {
    "inumber": {}
  },
  {
    "inumber": {}
  }
] }

另一方面,如果验证错误发生在此之外ng-repeat:

<input ng-model="name" name="iname" required="true" />
Run Code Online (Sandbox Code Playgroud)

form.$error对象包含以下内容:

{ "required": [ {} ] }

但是,我期待以下内容:

{ "required": [ {'iname': {} } ] }

关于为什么缺少元素名称的任何想法?

可以在这里找到一个运行的plunkr:http://plnkr.co/x6wQMp

angularjs angularjs-ng-repeat

65
推荐指数
2
解决办法
5万
查看次数

AngularJS按表头排序行

我有四个表头:

$scope.headers = ["Header1", "Header2", "Header3", "Header4"];
Run Code Online (Sandbox Code Playgroud)

我希望能够通过单击标题对我的表进行排序.

所以,如果我的表看起来像这样

H1 | H2 | H3 | H4
A    H    D   etc....
B    G    C
C    F    B
D    E    A
Run Code Online (Sandbox Code Playgroud)

然后我点击

H2
Run Code Online (Sandbox Code Playgroud)

我的表现在看起来像这样:

H1 | H2 | H3 | H4
D    E    A   etc....
C    F    B
B    G    C
A    H    D
Run Code Online (Sandbox Code Playgroud)

也就是说,每列的内容永远不会改变,但是通过单击我想按列排序的标题,行将自行重新排序.

我的表的内容是由Mojolicious完成的数据库调用创建的,并返回给浏览器

$scope.results = angular.fromJson(data); // This works for me so far
Run Code Online (Sandbox Code Playgroud)

我拼凑在一起的其余代码看起来像这样:

<table class= "table table-striped table-hover">
    <th ng-repeat= "header in headers">
        <a> {{headers[$index]}} </a> …
Run Code Online (Sandbox Code Playgroud)

html-table angularjs angularjs-ng-repeat

63
推荐指数
2
解决办法
13万
查看次数

布尔值上的ng-repeat过滤器

我试图在ng-repeat中过滤一个布尔值.

未注册用户列表:

    <h3>Unregistered Users</h3>
    <div ng-repeat="user in users | filter:!user.registered">
        <div class="row-fluid">
        <div class="span2">
          {{user.name}}
        </div>
      </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

注册用户列表:

    <h3>Registered Users</h3>
    <div ng-repeat="user in users | filter:user.registered">
        <div class="row-fluid">
        <div class="span2">
          {{user.name}}
        </div>
      </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

有没有一种很好的方法来过滤注册和!注册.

angularjs angularjs-ng-repeat angularjs-filter

61
推荐指数
3
解决办法
7万
查看次数