Error message indicating an issue with ng-repeat when working with an

$http.get('***').success(function(data, status,response)
{ 
$scope.items=data;
var getdata=JSON.stringify(data.D_Services);
console.log(getdata);
});
im retrieving in the console
D_Services: "Wash,Tyres,Spares,Accessories";

Could someone please assist me?

<div ng-controller="Test1Controller" data-ng-init="loadservice()">
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.SELECTED"  ng-true-value="'Y'" ng-false-value="'N'"/> {{item.D_Services}}
</div>
</div>

I am looking for a solution similar to this one. Can anyone help?

Currently, this is the result I am obtaining

javascriptangularjs

Answer №1

You assign your data as a String.

Consider using an Array instead:

$scope.items = ['Wash', 'Tyres', 'Spares', 'Accessories'];

If you must maintain it as a String, utilize .split():

<div ng-repeat="item in items.split(',')">

Answer №2

Keep track of your belongings by storing them in a list

$scope.belongings = ['Clothes', 'Books', 'Electronics', 'Kitchenware'];

Next, use the following code snippet:

<div ng-repeat="item in belongings">

Answer №3

To ensure that each string has a corresponding selected flag, it is necessary to create a list of objects.

$scope.items=[
  {title: "Wash", selected: false},
  {title: "Tyres", selected: false}, 
  {title: "Spares", selected: false },
  {title: "Accessories", selected: false}" ];

Subsequently, the following code can be utilized.

<div ng-controller="Test1Controller" data-ng-init="loadservice()">
  <div ng-repeat="item in items">
   <input type="checkbox" ng-model="item.selected" ng-true-value="'Y'" ng-false-value="'N'"/> {{item.title}}
  </div>
</div>

Answer №4

Creating checkboxes with AngularJS

<div ng-controller="CheckboxController" data-ng-init="loadItems()">
<div ng-repeat="item in items">
<input type="checkbox" ng-model="item.isSelected" ng-true-value="'Y'" ng-false-value="'N'"/> {{item}}
</div>
</div>

In the controller:

$scope.items=["Wash","Tyres","Spares","Accessories"];

For a visual representation, you can check out this fiddle: http://jsfiddle.net/sykxr2ex/

If you want to utilize services, you can use this Plunker link: http://plnkr.co/edit/Y0Y5o2?p=preview

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

One simple trick to conceal a div element by clicking anywhere on the page

Within my main header controller, I have the following setup: <div class="fade-show-hide" ng-class="{'ng-hide':loggedInClose==true}" ng-show="loggedInOpened" ng-cloak> @Html.Partial("~/Views/Shared/_LoggedInPartial.cshtml") </div> I ...

angularjs

Angularjs does not seem to be rendering content placed within curly braces

I'm working on setting up a page with Angular, and I'm facing an issue with displaying JSON data received from the server. Here is the code snippet: HTML <body ng-app="App"> <nav class="navbar navbar-dark bg-inverse navbar-fixed-top"& ...

javascriptangularjsjson

EmberJS add item to an object through pushObject

I'm currently working on setting up a property within an object that will also be an object itself. For example, let's say I have a property named 'cities' and I want to assign populations to different cities within this object. cities ...

javascriptember.js

Please provide several input fields with identical 'name' attributes for submission

I'm encountering an issue with a form where multiple input fields (text) share the same name attribute. On the backend, I am utilizing node.js and Mongoose for a POST method. Below is a snippet of the code: if(existingFruit) { Fruit.findOneA ...

javascriptnode.jsformsmongoose

Verify if the specified value is present in the dropdown using AngularJS

Utilizing AngularJS, I have implemented an input field with autocomplete functionality. The autocomplete feature pulls data from a JSON file and displays it in a dropdown table format. Users are able to filter the results and select a value from the dropdo ...

javascripthtmlangularjsvalidation

Using Javascript to group elements by JSON data

I have an array of JSON objects and I'm attempting to organize it by a specific element. I came across some code example on grouping JSON format from this link const groupBy = prop => data => { return data.reduce((dict, item) => { ...

javascript

What is the best way to conceal the standard 'X' close button within a magnific popup interface?

I implemented the Magnific-popup plugin in my jsp to show messages to users. Here is the code I used to open Magnific Popup: $.magnificPopup.open({ items: { type: 'inline', src: '#idOfSomeDivInPage' }, focus: '#some ...

javascriptjquerymagnific-popup

Utilize the lodash times method for indexing

I have a requirement to duplicate a component "n" number of times. I achieved this by utilizing the lodash method called "times". However, I encountered an issue with assigning an index as a key for the generated components. Below is the snippet of code t ...

javascriptnode.jslodash

Tips for dynamically binding the image source in Angular based on certain conditions

Hi, I'm receiving a response from an API that only includes a name but no image source. However, I have a collection of images in my local images folder. <div class="left"> <img src="{{ record.imgSrc }}" alt="{ ...

angularangularjs

Having trouble with React MaterialUI <ListItemSecondaryAction> getting stuck while dragging within a react-beautiful-dnd Draggable?

I am currently utilizing react-beautiful-dnd to create draggable list items with the help of Material UI ListItems. Each of my ListItems consists of a ListItemText and a ListItemSecondaryAction which acts as a target for triggering a context menu (enclosi ...

javascriptreactjsmaterial-uireact-beautiful-dnd

What is the best way to incorporate component-specific CSS styles in React?

This is the layout that I am attempting to replicate (originally from react-boilerplate): component |Footer |style.css |Footer.js In Footer.js, the styles are imported in a very elegant manner like this: import React from 'react'; im ...

javascripthtmlcssreactjswebpack-dev-server

I am facing an issue with my useFetch hook causing excessive re-renders

I'm currently working on abstracting my fetch function into a custom hook for my Expo React Native application. The goal is to enable the fetch function to handle POST requests. Initially, I attempted to utilize and modify the useHook() effect availab ...

javascriptreactjstypescriptreact-nativereact-hooks

Guide to Implementing the GitHub Fetch API Polyfill

I'm facing an issue with making my code compatible with Safari by using the GitHub Fetch Polyfill for fetch(). I followed the documentation and installed it using: $ npm install whatwg-fetch --save Although I completed this step, I am unsure of how ...

javascriptnpmpolyfillsfetch-api

Issue with inconsistent indentations in Pug template

Dealing with the Pug template engine has been a frustrating experience. Despite spending an entire day trying to figure it out, all I got was errors about inconsistent indentations. It's disheartening when my text ends up in the "our sponsor section" ...

javascriptnode.jsexpresspug

Why isn't the angular2 css style applying to dynamically generated elements?

Question: Why does the note.component.css file not work for dynamically created elements within note.component.ts in Angular 2? Is this the expected behavior? The note.component.css can style elements that already exist in note.component.html. If I move ...

htmlcssangularjs

The resizing function on the droppable element is malfunctioning on Mozilla browsers

I've been working on making one div both droppable and resizable. Surprisingly, everything is functioning perfectly in Chrome but not in Firefox. If you'd like to see the issue for yourself, here is my jsFiddle demo that you can open in Firefox: ...

javascriptjqueryhtmlcss

Transform an array of values into a new array with a set range

Looking for a solution in JavaScript! I currently have an array of values: var values = [3452,1234,200,783,77] I'm trying to map these values to a new array where they fall within the range of 10 to 90. var new_values = [12,48,67,78,90] Does anyo ...

javascript

When the collapse button is clicked, I aim to increase the top value by 100. Subsequently, upon a second click, the top value should

https://i.stack.imgur.com/p9owU.jpghttps://i.stack.imgur.com/Kwtnh.jpg I attempted to utilize jQuery toggle, but unfortunately, it is not functioning as expected. <script> $(document).ready(function () { $(".sidebar ul li&quo ...

javascripthtmljquerycss

struggling with beginner-level JavaScript issues

Hey there, I've been running into a bit of an issue with my basic javascript skills: function tank(){ this.width = 50; this.length = 70; } function Person(job) { this.job = job; this.married = true; } var tank1 = tank(); console.log( ...

javascript

Preventing Page Scroll While New Data is Loading

I am currently working on a React class component that uses Post components. Within this component, there is a button that triggers the loading of more data from the database. The issue I am encountering is that when new data is fetched, the page automatic ...

javascriptreactjsscrollcomponents