Angularjs 可编辑的字体头不更新范围

Angularjs xeditable typehead not updating the scope

本文关键字：更新 范围 字体 编辑 Angularjs      更新时间：2023-09-26

我使用角度可编辑的typehead指令来显示自动完成下拉列表。我正在从页面上的 json 文件中获取数据，并使用 jso 数组进行 e-typeahead。当我在输入类型中键入某些内容时，它会显示数组中的匹配值。但是当我从列表中选择任何值时，它不会更新模型和视图。我的文件如下所示：

共.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",
    "1100  APREMONT",
    "1100  ARBENT",
    "1100  BOUVENT",
    "1100  GEOVREISSET",
    "1100  OYONNAX",
    "1100  VEYZIAT",
    "1110  ARANC",
    "1110  BRENOD",
    "1110  CHAMPDOR",
    "1110  CORCELLES"];
   });

html 就像：

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

将控制器更改为以下

    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",
        "1100  APREMONT",
        "1100  ARBENT",
        "1100  BOUVENT",
        "1100  GEOVREISSET",
        "1100  OYONNAX",
        "1100  VEYZIAT",
        "1110  ARANC",
        "1110  BRENOD",
        "1110  CHAMPDOR",
        "1110  CORCELLES"];
    $scope.model = {
       zip_code: null
    };
});

将标记更改为以下

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