AngularJS Expression while referencing multiple variables and filters

Question

In the learning stages still of AngularJS. Trying to do multiple variables and filters at the same time.

Specifically. I have a Nested UnOrdered List that has H elements etc... H1 is a State Name suchas: Ohio, Indiana, Kentucky. So... state.statename if I understand is looking for the word "state" in state names: referenced on my ng-repeat of . Which is then looking at the Scope "statenames" in my Controller and returning the result of "statename: whatever".

All that is working as I'd like it to.

However I'm then trying to say within the nested list-items for any state, when putting all these variables together to make a sentence, put statei.stateinitial which = State Initial at the beginning of the sentence then append all the other variables. But it won't work.

EXAMPLE:

I tried doing things like: (thinking it needed to be referenced at some point before hand to even work.)

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

I tried separating statenames from stateinitials but creating 2 scopes which seemed overkill verse reusing the same scope name.

Can you not do?

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

Or is like in theory:

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

WORKING VERSION 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>

7stud · Accepted Answer · 2014-12-06 00:55:11Z

1)

So... state.statename if I understand is looking for the word "state" in state names:

No. state.statename means there is a variable named state, which previously has been assigned an object, and the object has a key named statename. For instance:

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

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

So you have it backwards. Instead, state.statename looks for statename in state.

On the other hand, when you write:

ng-repeat="state in statenames"

angularjs looks for an array called statenames, then in turn assigns each element of the array to a variable called state.

2) No programmer should ever use variables named levelZero, levelOne, levelTwo, etc. Instead, a wise programmer will name the variables level[0], level[1], level[2], etc. Or in your case, because you have non numerical keys as well: level['zero'], level['one'], level['two'], level['std'], level['ltd'].

3)

I tried separating statenames from stateinitials but creating 2 scopes

That does not create separate scopes; that creates separate variables on the same scope, namely $scope. For instance,

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

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

4)

Can you not do?

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

No you cannot. The pipe, |, says to filter the thing on the left of the pipe by the filter specified on the right of the pipe, and in this fragment:

statenames | levelStd in levelStdDetails

...the thing to the right of the pipe is not a filter.

5)

However I'm then trying to [put] all these variables together to make a sentence

You have a couple of problems with your sentence:

a) You never created a variable named statei anywhere in your code, so you can't write:

statei.<anything here>

b) You did create a variable named state(in an earlier ng-repeat), but you cannot use state.stateinitial in your sentence either--because a state has no stateinitial key:

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

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

...well at least the first three state's have no stateinitial key.

When you wrote ng-repeat="state in statenames, angularjs assigned each element in the statenames array to a variable named state, e.g.

state = {statename: "Indiana" };

Therefore, you can't write state.stateinitial because there is no stateinitial key in that object.

What you need to do is this:

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

Then you can write ng-repeat="state in states | orderBy: 'name'", and then in your sentence you can use state.name or state.initial.

Wow @7stud thank you very much for the well informed and educational answer. That was awesome! I'm primarily a CSS/HTML5 guy desiring JS,PHP and Angular knowledge. This was super helpful, thanks! — Ultratron, Dec 5 '14 at 14:11

asked	11 months ago
viewed	170 times
active	11 months ago

current community

your communities

more stack exchange communities

AngularJS Expression while referencing multiple variables and filters

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged angularjs angularjs-scope angularjs-ng-repeat angularjs-controller or ask your own question.

Hot Network Questions

current community

your communities

more stack exchange communities

AngularJS Expression while referencing multiple variables and filters

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged angularjs angularjs-scope angularjs-ng-repeat angularjs-controller or ask your own question.

Related

Hot Network Questions