Leaving a state in Angular after selecting an empty option in the ng-repeat on a select element triggers

Question

Leaving a state in Angular after selecting an empty option in the ng-repeat on a select element triggers

When working with angular.js, I am dynamically generating options for a <select> element using the ng-repeat directive.

Instead of using ng-options, I opted for ng-repeat because this is for an empty form where I needed to set default values for selected and disabled, as well as have a final option not in the model.

var form = {}; // This object will store form data, including form.boro

var boros = {"BK":"brooklyn","Q":"queens","NY":"manhattan","BX":"bronx","SI":"staten island"}

<select class='form-control capitalize' name="city" ng-model='form.boro' >
    <option value="" >City</option> 
    <option ng-repeat="(k, val) in boros" value="{{k}}">{{val}}</option>
    <option value='other'>Other</option>
</select>

Although this setup successfully generated the intended element and options, it caused the following error:

TypeError: Cannot read property '$$phase' of null

This error was triggered by setting value="" in

<option value="">City</option>

The application continued to function without crashing, but I am interested in understanding why this occurs upon state exit and if there might be a mistake in my implementation.

javascript angularjs angularjs-ng-repeat ng-options angularjs-ng-options

Answer 1

Answer №1

It appears that adding the attributes selected and disabled to the initial empty option resolves the issue.

<option value="" selected disabled >City</option>

Seems like I missed that detail :/

Answer 2

It appears that adding the attributes selected and disabled to the initial empty option resolves the issue.

<option value="" selected disabled >City</option>

Seems like I missed that detail :/

Answer 3

Answer №2

It seems like there may be an issue with the {{city}} selection in the dropdown menu. There might not be a corresponding model available for it. If we display both the {{boro}} as a value and the {{city}} as text, there needs to be a relationship established between the city and boro. Another approach could be storing all cities in an array of objects and retrieving the city value by passing the boro key to a controller function like {{getCity(boro)}}. The boro can then be set using ng-model="boro".

Answer 4

It seems like there may be an issue with the {{city}} selection in the dropdown menu. There might not be a corresponding model available for it. If we display both the {{boro}} as a value and the {{city}} as text, there needs to be a relationship established between the city and boro. Another approach could be storing all cities in an array of objects and retrieving the city value by passing the boro key to a controller function like {{getCity(boro)}}. The boro can then be set using ng-model="boro".

Answer 5

Answer №3

Upon examining your code snippet, it seems that the issue lies in not placing your objects in an array. It appears that ng-repeat operates on a collection of objects. To address this, you can organize your options in an array using the following format for example: [{code: BQ, city: Brooklyn}]. See the updated code below:

app.controller('MainCtrl', function($scope) {
    $scope.form = {}; 
    $scope.boros = [
      {code: "BK", city: "brooklyn"}, 
      {code: "Q", city: "queens"},
      {code: "NY", city: "manhattan"},
      {code: "BX", city: "bronx"},
      {code: "SI", city:"staten island"}
    ]
});

Here is the revised template:

<select class='form-control capitalize' name="city" ng-model='form.boro' >
    <option value="" >City</option> 
    <option ng-repeat="boro in boros track by $index" value="{{boro}}">{{boro.city}}</option>
    <option value='other'>Other</option>
</select>

You can view the changes in action on this Plunker link.

Answer 6

Upon examining your code snippet, it seems that the issue lies in not placing your objects in an array. It appears that ng-repeat operates on a collection of objects. To address this, you can organize your options in an array using the following format for example: [{code: BQ, city: Brooklyn}]. See the updated code below:

app.controller('MainCtrl', function($scope) {
    $scope.form = {}; 
    $scope.boros = [
      {code: "BK", city: "brooklyn"}, 
      {code: "Q", city: "queens"},
      {code: "NY", city: "manhattan"},
      {code: "BX", city: "bronx"},
      {code: "SI", city:"staten island"}
    ]
});

Here is the revised template:

<select class='form-control capitalize' name="city" ng-model='form.boro' >
    <option value="" >City</option> 
    <option ng-repeat="boro in boros track by $index" value="{{boro}}">{{boro.city}}</option>
    <option value='other'>Other</option>
</select>

You can view the changes in action on this Plunker link.

Leaving a state in Angular after selecting an empty option in the ng-repeat on a select element triggers

Answer №1

Answer №2

Answer №3

Similar questions

Invert the motion within a photo carousel

Creating a specialized pathway with variable inputs within the URL

The Ajax query returned a successful response, yet it unexpectedly triggered an error

Utilizing React with Firebase involves executing several Firebase requests simultaneously and ensuring the completion of all promises

Step by step guide to verifying email addresses with Selenium WebDriver

The command "json_encode($array)" does not seem to be encoding the complete array

Is there a way to restrict input to numeric characters exclusively in Swal Sweetalert?

Tips for updating the value of a $scope variable and running tests with AngularJS Jasmine

Obtain appended data from the formData

Reacting to URL Changes but Failing to Load the Requested Page

Capturing the value of a child element using an Angular directive

Exploring different methods to locate a random ID using XPATH, CSS path, and selector while conducting Selenium c# testing on a CMS tool

Using Various Initialization Techniques to Find the Difference in Javascript Arrays

What's the reason behind the jQuery tools CDN link directing to an advertisement?

Is it possible to determine the status of the cover by inspecting the element?

To resolve the issue in Node, address the following error message: "User validation failed: username: Path `username` is required. Password: Path `password` is required."

Encrypting data using pidCrypt in a combination of Javascript and PHP

Utilizing Jquery to locate a link inside a Div and displaying it as specified in the HTML

retrieve fresh information from the API

How can you extract the property names of the first object in an array of objects?