CODEWITHSUNDEEP
javascriptangularjs
Jimmy
Jimmy

Reputation: 881

Angular ng-repeat ignoring nested ng-if

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!!!

Upvotes: 1

Views: 362

Answers (2)

TomSlick
TomSlick

Reputation: 735

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.

Upvotes: 1

Matt
Matt

Reputation: 35291

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>

Upvotes: 0

Related Questions