Eliminate the empty choice for Angular when dealing with dynamic option objects

Question

Eliminate the empty choice for Angular when dealing with dynamic option objects

Looking for assistance with this code snippet:

<select ng-model='item.data.choice' >
  <option ng-if='item.data.simple_allow_blank == false' ng-show='choice.name' ng-repeat='choice in item.data.simple_choices' value="{{choice.name}}" ng-disabled="$parent.controllerAction == 'show'">{{choice.name}}</option>
</select>

The code displays 3 choices specified by the system administrator in a dropdown menu, excluding any blank options.

The issue arises when I try to set a default value (e.g. choice[0]) as it results in an extra blank option being included.

I attempted to follow advice provided in this Stack Overflow question on switching from ng-repeat to ng-options.

In my case, despite having a dynamic list of choices including 1, 2, 3, and a blank option, removing the blank proved challenging while ensuring an initial default value was selected. Using ng-options introduced the unwanted blank entry each time a new list was generated, while reverting to ng-repeat removed the Blank option but lacked the ability to set an initial value from the dynamic list.

Although I can assign a default value, eliminating the blank option remains elusive. Any insight or guidance would be greatly appreciated. Thank you.

css angularjs html

Answer 1

Answer №1

In order to manipulate data in a JavaScript file, you'll need to filter the information and create a new array that can be displayed on an HTML page. For example, if you're fetching data stored in the variable **item.data.simple_choices** (as indicated in your ng-repeat directive), you can achieve this using the following function:

var data = item.data.simple_choices;
var filteredArray = [];
data.filter(function(item){
  if(item.name!=''){
filteredArray.push(item)
}
})

Answer 2

In order to manipulate data in a JavaScript file, you'll need to filter the information and create a new array that can be displayed on an HTML page. For example, if you're fetching data stored in the variable **item.data.simple_choices** (as indicated in your ng-repeat directive), you can achieve this using the following function:

var data = item.data.simple_choices;
var filteredArray = [];
data.filter(function(item){
  if(item.name!=''){
filteredArray.push(item)
}
})

Answer 3

Answer №2

After spending hours researching online and going through numerous trial and error attempts, I finally managed to find the correct solution.

<select ng-model='model'>
        <!-- this is how you properly bind it -->
          <option ng-show='choice.name'  ng-repeat='choice in object' value="{{choice.name}}" ng-selected='model = object[0].name'>{{choice.name}}</option>
      </select>

The code may seem straightforward, but this structure proves to be useful because 'object' holds the values of the list. As seen, I assigned it to the 'model' variable since 'model' is the variable used in the view. The [0] signifies the index number within the list. You can choose between using 'value' or 'name' based on the parameters present in the object.

Answer 4

After spending hours researching online and going through numerous trial and error attempts, I finally managed to find the correct solution.

<select ng-model='model'>
        <!-- this is how you properly bind it -->
          <option ng-show='choice.name'  ng-repeat='choice in object' value="{{choice.name}}" ng-selected='model = object[0].name'>{{choice.name}}</option>
      </select>

The code may seem straightforward, but this structure proves to be useful because 'object' holds the values of the list. As seen, I assigned it to the 'model' variable since 'model' is the variable used in the view. The [0] signifies the index number within the list. You can choose between using 'value' or 'name' based on the parameters present in the object.

Eliminate the empty choice for Angular when dealing with dynamic option objects

Answer №1

Answer №2

Similar questions

Is it possible to extract only the time from a date and time using angular-moment library?

Struggling to successfully toggle the visibility of items

Leveraging AngularJS and PhoneGap for seamless Facebook login/SDK integration even without the need for a server

What would be more efficient for designing a webpage - static HTML or static DOM Javascript?

Alternate. (individually)

The error message "Property 'push' of undefined in AngularJS" occurs when the push method is being called

Enhance the CSS styling for the React-Calendly integration in a React project

Issue with ngRepeat not functioning properly in ngMap

Steps to import an excel file by clicking a button in an Angular application

AngularJS - Unchecked radio button issue

Master the art of string slicing in JavaScript with these simple steps

When attempting to retrieve a value from a dropdown menu in HTML using PHP, an undefined index error occurs

Learning how to utilize various types of buttons in C# and ASP.NET with this

Is it possible to utilize a contenteditable div in place of a textarea?

Tips on deleting a section of text inside a div

What specific CSS selector should be targeted in order to modify the appearance of this button?

Alignment of a div at the bottom inside a jumbotron using Bootstrap 4

I have found that the CSS property command for multiple columns functions properly in Opera and IE, but unfortunately does not work in Firefox, Chrome, or Safari

Encountering a TypeError while attempting to utilize Django and Pandas for displaying data in an HTML format

align the horizontal navigation bar