参考多个变量和过滤器的AngularJS表达式

在AngularJS的学习阶段。试图同时做多个变量和过滤器。参考多个变量和过滤器的AngularJS表达式

具体而言。我有一个有H元素的嵌套无序列表... H1是一个州名称：俄亥俄州，印第安纳州，肯塔基州。所以... state.statename如果我明白的是在状态名称中寻找单词“state”：在我的ng-repeat中引用。然后在Controller中查看Scope“statenames”并返回“statename：whatever”的结果。

所有工作，因为我喜欢它。

然而，我然后试图在任何状态的嵌套列表项中说，当把所有这些变量放在一起做一个句子时，把statei.stateinitial这个= State Initial放在句子的开头，然后将所有的其他变量。但它不会工作。

例：

我试图做这样的事情：（认为它需要在某个时候被引用前手甚至不工作。）

<ul ng-repeat="**statei in statenames** | levelStd in levelStdDetails | orderBy: 'levelname' "

我试图从stateinitials分离statenames但是创建2范围似乎过度使用相同的范围名称重复使用。

你不行吗？

SOMETHING-A | SOMETHING-B | orderby: SOMETHING-A

或者是像理论：

SOMETHING-A & SOMETHING-B & SOMETHING-C but orderby: SOMETHING-A

工作版本 http://jsfiddle.net/jonnyborg/ge119m6u/1/

<!doctype html> 
<html lang="en" ng-app="PlansDetail"> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
</head> 
<body ng-controller="PlansController"> 
    <div> 
     <form class="form-inline"> 
      <input ng-model="query" type="text" placeholder="Filter by" autofocus> 
     </form> 

     <section ng-repeat="state in statenames | filter:query | orderBy: 'statename' "> 
      <h1>{{state.statename}}</h1> 
      <ul> 
       <li ng-repeat="group in groups | orderBy: 'groupname' "> 
        <h2>{{group.groupname}}</h2> 
        <ul> 
         <li ng-repeat="metal in metals | orderBy: 'metalname' "> 
          <h3>{{metal.metalname}}</h3> 
          <ul ng-repeat="levelStd in levelStdDetails | orderBy: 'levelname' "> 
           <li><a ng-href="{{statei.stateinitial + ' ' + group.groupname + ' ' + metal.metalname + ' ' + levelStd.levelname | slug }}.pdf" ng-attr-title="{{statei.stateinitial + ' ' + group.groupname + ' ' + metal.metalname + ' ' + levelStd.levelname}}">{{statei.stateinitial + " " + group.groupname + " " + metal.metalname + " " + levelStd.levelname}}</a></li> 
          </ul> 
          <ul ng-repeat="levelOne in levelOneDetails | orderBy: 'levelname' "> 
           <li><a ng-href="{{statei.stateinitial + ' ' + group.groupname + ' ' + metal.metalname + ' ' + levelOne.levelname | slug }}.pdf" ng-attr-title="{{statei.stateinitial + ' ' + group.groupname + ' ' + metal.metalname + ' ' + levelOne.levelname}}">{{statei.stateinitial + " " + group.groupname + " " + metal.metalname + " " + levelOne.levelname}}</a></li> 
          </ul> 
          <ul ng-repeat="levelTwo in levelTwoDetails | orderBy: 'levelname' "> 
           <li><a ng-href="{{statei.stateinitial + ' ' + group.groupname + ' ' + metal.metalname + ' ' + levelTwo.levelname | slug }}.pdf" ng-attr-title"{{statei.stateinitial + ' ' + group.groupname + ' ' + metal.metalname + ' ' + levelTwo.levelname}}">{{statei.stateinitial + " " + group.groupname + " " + metal.metalname + " " + levelTwo.levelname}}</a></li> 
          </ul> 
          <ul ng-repeat="levelThree in levelThreeDetails | orderBy: 'levelname' "> 
           <li><a ng-href="{{statei.stateinitial + ' ' + group.groupname + ' ' + metal.metalname + ' ' + levelThree.levelname | slug }}.pdf" ng-attr-title"{{statei.stateinitial + ' ' + group.groupname + ' ' + metal.metalname + ' ' + levelThree.levelname}}">{{statei.stateinitial + " " + group.groupname + " " + metal.metalname + " " + levelThree.levelname}}</a></li> 
          </ul> 
          <ul ng-repeat="levelLimited in levelLtdDetails | orderBy: 'levelname' "> 
           <li><a ng-href="{{statei.stateinitial + ' ' + group.groupname + ' ' + metal.metalname + ' ' + levelLimited.levelname | slug }}.pdf" ng-attr-title"{{statei.stateinitial + ' ' + group.groupname + ' ' + metal.metalname + ' ' + levelLimited.levelname}}">{{statei.stateinitial + " " + group.groupname + " " + metal.metalname + " " + levelLimited.levelname}}</a></li> 
          </ul> 
          <ul ng-repeat="levelZero in levelZeroDetails | orderBy: 'levelname' "> 
           <li><a ng-href="{{statei.stateinitial + ' ' + group.groupname + ' ' + metal.metalname + ' ' + levelZero.levelname | slug }}.pdf" ng-attr-title"{{statei.stateinitial + ' ' + group.groupname + ' ' + metal.metalname + ' ' + levelZero.levelname}}">{{statei.stateinitial + " " + group.groupname + " " + metal.metalname + " " + levelZero.levelname}}</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </section> 
    </div> 
<script> 
var app = angular.module("PlansDetail", []); 

app.controller("PlansController", function($scope) { 
    $scope.statenames = [ 
     { statename: "Indiana" }, 
     { statename: "Kentucky" }, 
     { statename: "Ohio" }, 
     { stateinitial: "IN" }, 
     { stateinitial: "KY" }, 
     { stateinitial: "OH" } 
    ]; 

    $scope.groups = [ 
     { groupname: "Family Plan" }, 
     { groupname: "Family Plan W/Extras" }, 
     { groupname: "Individual Plan" }, 
     { groupname: "Individual Plan W/Extras" } 
    ]; 

    $scope.metals = [ 
     { metalname: "Gold" }, 
     { metalname: "Silver" }, 
     { metalname: "Bronze" }, 
     { metalname: "Catastrophic" } 
    ]; 

    $scope.levelStdDetails = [ 
     { levelname: "Level Standard EVIDENCE OF COVERAGE" }, 
     { levelname: "Level Standard SUMMARY OF BENEFITS" }, 
     { levelname: "Level Standard SCHEDULE OF BENEFITS" } 
    ]; 

    $scope.levelOneDetails = [ 
     { levelname: "Level 1 EVIDENCE OF COVERAGE" }, 
     { levelname: "Level 1 SUMMARY OF BENEFITS" }, 
     { levelname: "Level 1 SCHEDULE OF BENEFITS" } 
    ]; 

    $scope.levelTwoDetails = [ 
     { levelname: "Level 2 EVIDENCE OF COVERAGE" }, 
     { levelname: "Level 2 SUMMARY OF BENEFITS" }, 
     { levelname: "Level 2 SCHEDULE OF BENEFITS" } 
    ]; 

    $scope.levelThreeDetails = [ 
     { levelname: "Level 3 EVIDENCE OF COVERAGE" }, 
     { levelname: "Level 3 SUMMARY OF BENEFITS" }, 
     { levelname: "Level 3 SCHEDULE OF BENEFITS" } 
    ]; 

    $scope.levelLtdDetails = [ 
     { levelname: "Level Limited EVIDENCE OF COVERAGE" }, 
     { levelname: "Level Limited SUMMARY OF BENEFITS" }, 
     { levelname: "Level Limited SCHEDULE OF BENEFITS" } 
    ]; 

    $scope.levelZeroDetails = [ 
     { levelname: "Level Zero EVIDENCE OF COVERAGE" }, 
     { levelname: "Level Zero SUMMARY OF BENEFITS" }, 
     { levelname: "Level Zero SCHEDULE OF BENEFITS" } 
    ]; 

    $scope.filterFunction = function(element) { 
     return element.name.match(/^Ma/) ? true : false; 
    }; 

}); 


angular.module('PlansDetail') 
    .filter('slug', function() { 
    console.log('yo'); 
    return function (input) { 
     console.log('finally'); 

     if (input) { 
     return input.toLowerCase().replace(/[^a-z0-9_]/g, '-'); 
     } 
    }; 
    }); 



</script> 

</body> 
</html>

来源

2014-12-04 JonnyBorg

1）

所以...... state.statename如果我的理解是寻找单词“状态” 状态名称：

号state.statename意味着有一个名为state变量，而此前已分配的对象，并且该对象有一个名为statename的键。例如：

var state = { 
    statename: "Indiana", 
    capital: "Indianapolis" 
}; 

console.log(state.statename); //=> Indiana

所以你有它倒退。相反，state.statename在state中查找statename。

在另一方面，当写：

ng-repeat="state in statenames"

angularjs查找称为statenames阵列，则依次分配阵列到被叫state变量的每个元素。

2）没有程序员应该使用名为levelZero，levelOne，levelTwo等的变量。相反，聪明的程序员会命名变量level [0]，level [1]，level [2]等。或者在你的情况下，因为你也有非数字键：level ['zero']，level [''一个']，等级['two']，等级['std']，等级['ltd']。

3）

我试图从stateinitials分离statenames但是创建2个作用域

这并不创建单独的范围;它在同一范围内创建单独的变量，即$ scope。例如，

$scope = {}; 
$scope.x = 10; 
$scope.y = 20; 

console.log($scope); //=> { x: 10, y: 20 }

4）

你能不能做？

ng-repeat="statei in statenames | levelStd in levelStdDetails | orderBy: 'levelname'"

你就是不行。管道，|说，以过滤通过在管的右指定过滤器的管左侧的东西，在这个片段：

statenames | levelStd in levelStdDetails

...的事管权不是过滤器。

5）

然而然后我试图[把]所有这些变量在一起，使句子

你有几个与你的句子的问题：

a）您从未在代码中的任何位置创建名为statei的变量，因此您无法编写：

statei.<anything here>

b）您没有创建一个名为state（以较早的NG-重复变量），但你不能在你的句子使用state.stateinitial或者 - 因为state没有stateinitial键：

$scope.statenames = [ 
    { statename: "Indiana" }, 
    { statename: "Kentucky" }, 
    { statename: "Ohio" }, 

    { stateinitial: "IN" }, 
    { stateinitial: "KY" }, 
    { stateinitial: "OH" } 
];

..至少前三个state的没有stateinitial键。

当您编写ng-repeat="state in statenames时，angularjs将statenames数组中的每个元素分配给一个名为state的变量，例如，

state = {statename: "Indiana" };

因此，你可以不写state.stateinitial因为在该对象没有stateinitial关键。

你需要做的是什么：

$scope.states = [ 
    { 
     name: "Ohio", 
     initial: "OH" 
    }, 
    { 
     name: "Indiana", 
     initial: "IN" 
    }, 
    { 
     name: "Kentucky", 
     initial: "KY" 
    } 
    ]

然后，你可以写ng-repeat="state in states | orderBy: 'name'"，然后在你的句子，你可以使用state.name或state.initial。

来源

2014-12-04 23:53:28 7stud

哇@ 7stud非常感谢你的信息和教育的答案。这太棒了！我主要是一个想要JS，PHP和Angular知识的CSS/HTML5家伙。这非常有帮助，谢谢！ – JonnyBorg 2014-12-05 14:11:52

参考多个变量和过滤器的AngularJS表达式

回答

相关问题