Troubleshooting: Scope not updating in AngularJS xeditable typeahead

Currently, I am utilizing the angular xeditable typehead directive to display an autocomplete dropdown. The data is being retrieved from a JSON file on the page and utilized in the jso array for e-typeahead functionality. When typing into the input field, it successfully displays matching values from the array. However, upon selecting a value from the list, the model and view are not updating accordingly. Below is an example of how my files are structured:

conroller.js

var payApp = angular.module('payRoll', ["xeditable", "ui.bootstrap"]);

payApp.controller('mainCtrl', function($scope, $http, $window,$location, $filter) {
$scope.Zip_City_options = ["1000  BOURG EN BRESSE",
    "1000  BROU",
    "1000  ST DENIS LES BOURG",
    "1090  AMAREINS",
    "1090  AMAREINS FRANCHELEINS CES",
    "1090  CESSEINS",
    "1090  GENOUILLEUX",
    "1090  GUEREINS",
    "1090  LURCY",
    "1090  MONTCEAUX",
    "1090  MONTMERLE SUR SAONE",
    ...
    "1110  CHAMPDOR",
    "1110  CORCELLES"];
   });

The corresponding HTML code is as follows:

<div  ng-controller="mainCtrl">
   <span  class="list-group-item">
      <a href="#" ng-model="zip_code" editable-text="zip_code" e-typeahead="city for city in Zip_City_options | filter:$viewValue | limitTo:8">
         {{ zip_code || '58.29C' }}
      </a>                       
   </span>
</div>

Answer №1

Modify your controller as shown below

    var payrollApp = angular.module('payRoll', ["xeditable", "ui.bootstrap"]);

    payrollApp.controller('mainCtrl', function($scope, $http, $window,$location, $filter) {
    $scope.Zip_City_options = ["1000  BOURG EN BRESSE",
        "1000  BROU",
        "1000  ST DENIS LES BOURG",
        "1090  AMAREINS",
        "1090  AMAREINS FRANCHELEINS CES",
        "1090  CESSEINS",
        "1090  GENOUILLEUX",
        "1090  GUEREINS",
        "1090  LURCY",
        "1090  MONTCEAUX",
        "1090  MONTMERLE SUR SAONE",
        "1100  APREMONT",
        "1100  ARBENT",
        "1100  BOUVENT",
        "1100  GEOVREISSET",
        "1100  OYONNAX",
        "1100  VEYZIAT",
        "1110  ARANC",
        "1110  BRENOD",
        "1110  CHAMPDOR",
        "1110  CORCELLES"];

    $scope.dataModel = {
       zip_code: null
    };
});

Update your markup to the following

    <div ng-controller="mainCtrl">
    <span class="list-group-item">
    <a href="#" editable-text="dataModel.zip_code" e-typeahead="city for city in Zip_City_options | filter:$viewValue | limitTo:8">
          {{ zip_code || '58.29C' }}
   </a>                  

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

What is the best way to set a default selected value in an input text box?

Incorporating the typeahead feature into my project has been incredibly useful: <input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state.id as state.desc for state in states | filter:{name:$viewValue ...

Learn the process of covering the entire screen with a video

I'm attempting to achieve this: IMG Below is the code snippet I've been using: <div class="container" id="containervideo"> <div id="video"> <div class="box iframe-box"> <div class="container"> ...

The session data is not persisting in the express-session package

I am currently learning about HTTPS and working on implementing a login/logout function. In this function, I store the userId in the session when I login using the POST method. However, when I try to retrieve user information for the next components usin ...

Angular - Detecting Scroll Events on Page Scrolling Only

I am currently working on implementing a "show more" feature and need to monitor the scroll event for this purpose. The code I am using is: window.addEventListener('scroll', this.scroll, true); Here is the scroll function: scroll = (event: any) ...

troubles with dividing string

Recently delving into JavaScript/Angular development and encountering a little roadblock. I am attempting to break up a string of a textarea into an array at the \n character within a controller by utilizing $scope.mytext.split("\n"), however, I ...

The issue of jQuery, Ajax, and MVC6 parameters becoming null after an Ajax request has been identified

Hello everyone, I am a beginner in asp.net core, c# and MVC 6. Currently, I am facing an issue with sending data over ajax to my controller. function sendAjaxData() { $.ajax({ url: "AjaxWithData", // using hardcoded value for testing purpose type ...

Run a Javascript function when the expected event fails to happen

I currently have this setup: <input type="text" name="field1" onblur="numericField(this);" /> However, I am struggling to figure out how to execute the numericField() function for the element before the form is submitted. I attempted using document ...

Error Handling in ReactJS

Every time I try to execute my ReactJS code, an error pops up saying: Unhandled Rejection (Error): Material-UI: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90e2f5f1f3e4d0a1a6bea3bea0">[email protected]</a> ve ...

Currently, I am utilizing Angular 2 to extract the name of a restaurant from a drop-down menu as soon as I input at least two characters

I am currently utilizing Angular 2 and I am trying to retrieve the names of all restaurants from a dropdown menu. Currently, when I click on the text field, it displays all the results, but I would like it to only show results after I have entered at least ...

JQuery mishandles its left positioning

Here's the code snippet I've been working with: $(this).closest("p").after('<strong>' + arMess[iCurIndex] + '</strong>').next().animate({ top: $(this).offset().top - 57, left: -$(this).widt ...

I'm attempting to solve the retrieved data from a firebase query, but unfortunately, the data is refusing to resolve

I've been attempting to retrieve data from firebase using Node.js, but I'm having trouble resolving it. Specifically, I need to extract the timestamp from the data stored in firebase. I've tried using promises and forEach loops, but haven&a ...

What is causing the malfunction in this straightforward attrTween demonstration?

Seeking to grasp the concept of attrTween, I am exploring how to make a square move using this method instead of the simpler attr approach. Despite no errors being displayed in the console, the following example does not produce any visible results, leavin ...

Upon invoking the useEffect function, the default value can be seamlessly established within the input field of the antd library

I have a function called loadProfile that I need to execute within the useEffect hook. When this function is triggered, I want the name Mario to be automatically displayed in the input field labeled name. How can I set this default value using the antd lib ...

Implementing the @media rule using Javascript

I'm trying to use JavaScript to add an image dynamically, but I want to remove it when the viewport is 600px or wider. This is my approach so far: var img = document.createElement('img'); // (imagine here all the other fields being defined ...

Comparing "if" and "else" within the XMLHttpRequest() function will not

function banUser() { var userToBan = document.getElementById('userToBan').value; var cid = document.getElementById('chatId').value; if (userToBan.length <= 0) { var x = document.getElementById("banerror"); x.innerHTML ...

Listcell XUL with button options

How can I make buttons inside a listcell function in XUL? I am having trouble getting it to work. Here is the XUL code: <listitem id = "1"> <listcell label = "OK Computer"/> <listcell label = "Radiohead"/> <listcell label ...

How Can You Change the Position of a Threejs Vector3?

I'm attempting to create bones and then manipulate the vertices of each bone, but I am struggling with the correct syntax. Here is an example of what I have tried: var v = new THREE.Vector3(0,0,0); var b = new THREE.Bone(); b.position.x = 5; b.positi ...

What is the best way to know which API will return the result the fastest?

If we were to make 2 API calls, each taking around 6ms to return JSON data, what would be the sequence in which they provide the resulting data? The official JavaScript documentation mentions using Promise.all to manage multiple API calls. ...

From HTML to Mat Table: Transforming tables for Angular

I am currently facing a challenge with my HTML table, as it is being populated row by row from local storage using a for loop. I am seeking assistance in converting this into an Angular Material table. Despite trying various suggestions and codes recommend ...

Creating a stylish gradient text color with Material-UI's <Typography /> component

Is there a way to apply a gradient font color to a <Typography /> component? I've attempted the following: const CustomColor = withStyles({ root: { fontColor: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)", }, })(T ...