The power of AngularJS's ng-repeat with unordered lists

$scope.features =
    {
    "administrative": [
        { id: 1, val: "Country"},
        { id: 2, val: "Province"},
        { id: 3, val: "Locality"},
        { id: 4, val: "Neighborhood"},
        { id: 5, val: "Land parcel"}
    ],
    "landscape": [
        { id: 1, val: "Man made"},
        { id: 2, val: "Natural"}
    ]
};

<ul>
    <li ng-model="features" ng-repeat="feature in features">{{feature.i}}</li>
</ul>

With the help of AngularJS, my goal is to iterate through my dataset and generate a list containing the categories `administrative` and `landscape`. However, currently, I am receiving an output that includes the specific items within each category as well.

Answer №1

To loop through the keys of objects, you must utilize the following syntax, as detailed in the official documentation:

(key, value) in expression – where key and value are arbitrary identifiers defined by the user, and expression is the scope expression that provides the collection to iterate over.

For instance: (name, age) in {'adam':10, 'amalie':12}.

<ul>
    <li ng-repeat="(featureName, featureArray) in features">{{ featureName }}</li>
</ul>

Answer №2

To display each item in the features section individually, you can implement the following code:

<ul>
  <li ng-model="xyz" ng-repeat="(key, values) in features">{{ key }}</li>
</ul>

If you want to see an example of this functionality, check out this live demo.

Answer №3

It's almost there! Remember, when using ng-repeat, the main element should be an array. In this case, specifying features.administrative might be causing confusion. Instead, try using features.administrative directly. Within the {{}} tags, you can then specify the fields of the object without the need for ng-model.

Give this a shot:

<li ng-repeat="feature in features.administrative">{{feature.val}}</li>
<li ng-repeat="feature in features.landscape">{{feature.val}}</li>

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

ngModel.$setValidity is a one-time operation

Currently, I am working on a validation issue with an angular bootstrap ui datepicker popup. I have set the max and min dates for validation, which work when the user selects a date from the calendar. However, if the user manually inputs a date, these vali ...

Running into strictdi error for a controller that utilizes $inject syntax

After enabling strict-di on my application for minification purposes, I am facing strictdi errors and working on resolving them. One of the controllers is throwing a strictdi error even though I am correctly annotating using $inject following the John Papa ...

How can I make material cards in my layout function as hyperlinks?

Recently started exploring angular material. I have implemented material-cards in a row layout and now looking to make those cards clickable like URLs. My goal is to enable options like "Open in a new tab" when right-clicking on the cards. Any guidance o ...

Exploring the AngularJS world: Enhancing user experience with ui-router and

I am seeking a solution for using a single view across multiple pages with a logical structure in Angular. Additionally, I want to implement breadcrumbs for navigation on the homepage. $stateProvider .state('otherwise', { url: ' ...

"Troubleshooting issues with Material Design components in AngularJS: Why is <md-select> not functioning correctly

I'm attempting to implement the <md-select> tag, but I can't seem to achieve the same result as shown here. This is the code I've written: <div layout="column" layout-align="center center" style="margin: 0px 10px 0px 5px;"> & ...

How can we prevent the 'To Date' value from incrementing by one with each search in AngularJS when using Moment.js for conversion?

Implementing date range search functionality in AngularJS and utilizing moment.js. Despite setting the time zone, the 'To Date' field increments by one date each time. Below is the code snippet that I am using: function getSearchDate( ...

Issue with AngularJS 1.6.x: Unable to access property 'entry' as it is undefined

Check out my Plunker demo here After updating Angular from version 1.3.x to 1.6.x, I'm getting an error that says read property 'entry' of undefined I've attempted to define 'entry' as var entry = {}; and also tried using de ...

Modify the variable when a model undergoes alterations

How can I update a variable in my controller when one of the input models changes? I have two separate models for each input field, and I want to merge them into a new variable. However, this new variable does not update automatically when the input models ...

Is it possible to adjust the size variable in Angular controllers/services using Bootstrap?

Is there a way to dynamically adjust functionality in Angular services/controllers based on the current Bootstrap3 breakpoint (xs, sm, md, lg)? For example, opening a Kendo-UI window on desktop, but using a simple 100% width window on mobile. I'm loo ...

No content appearing instead of AngularJS code displayed

My goal is to retrieve data from a MySQL database using PHP and then pass that data in JSON format to AngularJS for display in a table. The HTML code looks like this: <body ng-app="myModule"> <div class="row"> <div class="col-lg-12 ...

The data being sent to the controller by my Service is not accessible in the expected manner

(function () { angular.module("app").controller('DashboardController', ['$q', 'dashboardService', function ($scope, $q,dashboardService) { var DashboardController = this; dashboardService.retrieveData(DashboardControll ...

Utilizing hidden types for radio button validation in AngularJS: A step-by-step guide

<input type="hidden" value="{{r.radioname}}" name="{{field.Name}}" ng-model="inputfield[field.Name][r.radioname]" required> <input type="radio" id="radio_{{$index}}" value="{{r.radioname}}" name="{{field.Name}}" ...

Obtain the attributes of the chosen option in a dropdown menu using AngularJS

When I first started working with Angular, I found the use of select dropdowns to be quite confusing. I have a JSON object that I am retrieving through an AJAX call and then populating my form with using AngularJS. In the dropdown menu, the setting.metric ...

AngularYelp: Node Integration for Enhanced Functionality

Embarking on a new learning journey here, so please bear with me... Discovered node-yelp while browsing Yelp's API docs. Check it out here. // Request API access: http://www.yelp.com/developers/getting_started/api_access var Yelp = require('yel ...

Is there a way to trigger a function upon the loading of a template in Angular 2?

I'm a newcomer to angular2 and I need to trigger a function when a template loads or initializes. I have experience with achieving this in angular1.x, but I'm struggling to figure out how to do it in angular-2. Here's how I approached it in ...

retrieve the height value of a div element using AngularJS

I'm having trouble retrieving the updated height of a div using AngularJS. It seems to only provide the initial value and does not update as expected: vm.summaryHeight = $(".history-log-container").height(); console.log(vm.summaryHeight);//always dis ...

Employing the MVC framework along with AngularJS and the Sortable feature, ensure that the nodes are sorted by

I am facing an issue with the sorting of nodes in a list. Whenever I create multiple nodes in the same session and then update the site, the nodes are randomly sorted. Is there a way to make them sort by the latest created node so that the first created no ...

Troubleshooting: Issues with Jquery's has, find, contains functions

As I check whether an element contains another element, I've previously utilized the jquery element.has(secondElement) function. In my angularjs project, I make use of jquery within a directive where I transclude elements through markup using ng-tran ...

What is the best way to transfer a variable to an isolated scope function?

I have set up a directive as shown below - <div data-my-param-control data-save-me="saveMe()"></div> Within the directive controller, I have connected the saveMe() function from the controller to an isolated scope like so - function MyParam ...

Using ng-selected in Angular-UI select functionality

Code Snippet: <div class="form-group col-md-4"> <label for="lenderBusinessState">Select State</label> <div class="input-group select2-bootstrap-append"> <ui-select name="lenderBusinessState" ng-model="lender ...