Angular ng-repeat ignoring nested ng-if

Question

Howdie do,

I'm attempting to only display an option if the code that the client used to login, matches the $scope.code in the controller.

The HTML should then display the option that matches the code the client logged in with.

View:

<div class="">
<select id="customer-dd" ng-model="selectedCustomer" ng-repeat="(group, msg) in codes">
    <option value="">select...</option>
            <div ng-if=" 'group' == 'code' ">
                 <option value="{{ group }} ">{{ msg }}</option>
             </div>
</select>
</div>

Controller:

$scope.code = dataFactory.getCode();
$scope.codes = {

 'ABC': 'First option',
 'DEF': 'Second option'
}

There should only be one option showing as a client can't login with more than one code at a time

However, when I run this, I keep getting two input boxes instead of just the one that matches the code.

Is there something I'm missing here?

* UPDATE *

I've updated the code to the following and multiple options are still being printed:

<div class="">
<select id="customer-dd" ng-model="selectedCustomer" ng-repeat="(group, msg) in codes">
    <option value="">select...</option>
        <div ng-if=" group == code ">
            <option value="{{ group }} ">{{ msg }}</option>
        </div>
</select>
</div>

* UPDATE * @ieaglle Removing the div allowed the if statement to excecute. The updated HTML is now:

<div class="">
<select id="customer-dd" ng-model="selectedCustomer" ng-repeat="(group, msg) in codes">
    <option value="">select...</option>
    <option ng-if=" group == code " value="{{ group }} ">{{ msg }}</option>
</select>
</div>

THANKKKK UUUU!!!

Thank you for your reply, however even when I remove the single quotes, I'm still getting every option printed instead of just the one — Jimmy
– Jimmy, Commented Sep 11, 2015 at 16:33
Is it okay to wrap option in div? I've never seen that. Why not apply ng-if on option itself? — xZ6a33YaYEfmv
– xZ6a33YaYEfmv, Commented Sep 11, 2015 at 16:41
@Jimmy, please see this plnkr.co/edit/CzguhLmnbCabvBYnRwhc?p=preview — xZ6a33YaYEfmv
– xZ6a33YaYEfmv, Commented Sep 11, 2015 at 16:56

TomSlick · Accepted Answer · 2015-09-11 17:38:34Z

1

Try using ng-options instead with a filtered object.

http://jsfiddle.net/joshdmiller/hb7lu/

HTML:

<select ng-model="selectedCustomer" ng-options="msg for (group, msg) in filterObjsByProp(codes)"></select>

JS:

$scope.code = 'ABC';
$scope.codes = {

    'ABC': 'First option',
        'DEF': 'Second option'
};

$scope.filterObjsByProp = function (items) {
    var result = {};
    angular.forEach(items, function (value, key) {
        if (key === $scope.code) {
            result[key] = value;
        }
    });
    return result;
}

Although this is overkill, since an object cannot have multiple properties with the same name, so you will only ever have 1 option in the select. As such, maybe a select is not the best option here, or maybe an array with key/value objects is better.

edited Sep 11, 2015 at 17:38

answered Sep 11, 2015 at 16:15

TomSlick

7355 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jimmy Over a year ago

Thank you for your reply, however even when I remove the single quotes, I'm still getting every option printed instead of just the one

Matt · Accepted Answer · 2015-09-11 16:39:57Z

0

Change your HTML to this. Notice the change in the ng-if statement.

<div class="">
<select id="customer-dd" ng-model="selectedCustomer">
    <option value="{{ group }}" ng-repeat="(group, msg) in codes">select...
            <div ng-if=" group == code ">
                {{ msg }}
             </div>
    </option>
</select>
</div>

edited Sep 11, 2015 at 16:39

answered Sep 11, 2015 at 16:26

Matt

35.6k30 gold badges94 silver badges107 bronze badges

3 Comments

Jimmy Over a year ago

Thank you for your reply, however even when I remove the single quotes, I'm still getting every option printed instead of just the one

Matt Over a year ago

I made some edits. First I moved the loop to the option level and removed the nested option. Maybe this is what you are looking for.

Jimmy Over a year ago

Still, the same. It's printing both options instead of just the one that matches the code

Collectives™ on Stack Overflow

Angular ng-repeat ignoring nested ng-if

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related