Angular ng-repeat not recognizing nested ng-if conditions

Hey there,

I'm trying to make sure that only the option corresponding to the code used by the client to log in is displayed.

The HTML should show the option that matches the client's login code.

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'
}

Only one option should be visible since a client can't log in with more than one code at once.

However, I am getting two input boxes instead of just one that matches the code. Am I missing something?

* UPDATE *

I have made some changes to the code as follows and still seeing multiple options 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 execute properly. The updated HTML now looks like this:

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

THANK YOU SO MUCH!!!

Answer №1

Consider utilizing ng-options along with a filtered object for better functionality.

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;
}

It may be an overkill since objects cannot have multiple properties with the same name, resulting in only one option in the select. Consider exploring other options such as arrays with key/value pairs.

Answer №2

Update your HTML code as shown below. Take note of the modification in the ng-if condition.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you extract information from a text document and seamlessly incorporate it into an HTML webpage?

I am currently working with an HTML file structured like this.. <html> <body> <table border="1" cellpadding="5"> <tr> <td>Some Fixed text here</td> <td id="data">---here data as per values in external text file--- ...

What are the steps to implementing partial page functionality with the $http service in Angular?

Could someone assist me with executing an operation once a partial page has been successfully loaded using the $http service in Angular? The operation involves checking a checkbox based on the scope value. I have included the source code below: Here i ...

Using JavaScript, transform a client's date/time string into a JSON-compatible date/time string

I need to find a way to convert a client's date/time string on a form into a JSON date/time string using JavaScript with moment.js for a Django REST API backend service. Here is the initial attempt: document.getElementById("dt_tm").value = moment(do ...

Storing information on the webpage when it is refreshed

My goal is to maintain the order of the data in the target ordered list even after a page refresh, achieved through jQuery prepend on document ready. Here's the code snippet: // when a refresh event occurs window.onbeforeunload = function(event){ ...

Why isn't my list showing up in Angular data binding?

Just delving into my first angular js list example and encountered a problem with displaying the list. Oddly, there are no errors showing up in the console:( html <body ng-controller="mycontroller"> <form ng-submit="addtask()">total numbe ...

Sophisticated jQuery templates

Working with jQuery templates can be straightforward for basic data structures. <script type="jquery/x-jquery-tmpl" id="myTemplate"> <li> ${Element} </li> </script> var elements = [ { Element: "Hydrogen" }, { Element: "Oxy ...

Refreshing JqGrid tables after making changes and saving a row

In my PHP file, I have 4 jqGrid tables where I pass a different JSON array for each table. The data displayed on the grids come from one table with various SQL conditions. I am using inline editing for all the grids. After editing and saving a row in tabl ...

Vue 2.0: Exploring the Power of Directive Parameter Attributes

It has come to my attention that directive param attributes have been phased out in Vue.js 2.0. As a result, I am unable to use syntax like v-model="msg" number within an input tag. Are there alternative methods to achieve the same outcomes without relyi ...

Split up the author page description with a new line break for better readability on WordPress

I have a unique plugin that transforms the Biographical Info editor into a standard editor interface. However, I am facing an issue where line breaks/new rows created in the backend are not visible on the front end, and I'm unsure of where the problem ...

Ensure that JSON requests are written in English when using FullCalendar

I am currently working on implementing a multi-language application using FullCalendar. My goal is to have the calendar display in multiple languages while keeping the JSON request always in English. However, when I switch languages, the JSON request also ...

Guide on adding a post type via the command line: Issue encountered - Anticipated POST console HTML error

Facing Error: EXPECTED POST in JQuery Ajax Call Encountering the same issue as mentioned in the provided link. The need is to switch from GET to POST, but direct alteration of ajax code is not feasible. It must be done dynamically using JavaScript through ...

Concurrent Accordion and Color Transformation Animations

I am currently utilizing jQuery version 2.0.3 and jQuery UI version 1.10.3, specifically using the accordion feature. I am attempting to modify the color of the accordion panels as they open and close by implementing the following code: $(".main-content") ...

Ways to identify when a modal window is being closed in the angular-ui $modal component

I am currently utilizing the $modal from angular-ui to generate a modal window. Below is the code snippet for creating the modal: this.show = function (customModalDefaults, customModalOptions, extraScopeVar) { //Create temporary objects to work with s ...

Continue scanning the expanding page until you reach the end

One of the challenges I am facing is that on my page, when I manually scroll it grows and then allows me to continue scrolling until I reach the bottom. This behavior is similar to a Facebook timeline page. In an attempt to address this issue, I have writ ...

Display the logout button in AngularJS upon clicking the SignIn button

I have a login form in a specific partial that is displayed within the main page's body. The file for the login form is named login.html. <form name="loginForm" class="form-horizontal" ng-controller="loginController" ng-submit="submit()" noval ...

Creating a webpage that loads directly to a specific section of content

After searching online, I couldn't find the solution I was looking for. My goal is to have the visible part of the page load halfway down the actual page. This way, when users visit the site, they can immediately scroll up to see more content. I hope ...

Trouble with hide/show loop in setTimeout function

I have a special animation with 3 text items that are initially invisible. The goal is to make these items appear one by one with a delay of 2 seconds after clicking a button. Each item should be visible for 1 second before fading out and making way for th ...

How to Use an Object Created from a Different Class in TypeScript

Scenario In the development process, I am using an auth.service.ts. This service is responsible for fetching user information from the database upon login. The retrieved data is then used to create a new user object. Here is a snippet of the code: user: ...

Having trouble removing the npm package spotifydl from my system

After running the command npm install -g spotifydl, I discovered that the package was obsolete and no longer functioning properly. Subsequently, I attempted to remove it using npm uninstall -g spotifydl, but instead of completely uninstalling, it kept re ...

A guide on successfully transferring JSON Data to an Express REST API

Currently, I am in the process of developing a REST API with Node/Express and have a query regarding the setup of the API along with integrating a JSON file. As an illustration, the JSON data that I wish to reference consists of an ID number, model, and co ...