Angularjs xeditable typehead没有更新的范围

本文介绍了Angularjs xeditable typehead没有更新的范围的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在用角xeditable typehead指令自动完成显示下拉。我从页面上的JSON文件中获取数据，并使用电子预输入的JSO阵列。它显示匹配的值从阵列时，我输入输入类型的东西。但是，当我从列表中选择任何值它不更新模型以及view.My文件是看起来像下面这样：

conroller.js

  VAR payApp = angular.module（'工资'，[xeditable，ui.bootstrap]）;payApp.controller（'mainCtrl'，函数（$范围，$ HTTP，$窗口，$位置$过滤器）{
$ scope.Zip_City_options = [1000布雷斯地区布尔格
    1000 BROU
    1000圣丹尼斯LES BOURG
    1090 AMAREINS
    1090 AMAREINS夫朗舍兰CES
    1090 CESSEINS
    1090热努约
    1090盖兰
    1090 LURCY
    1090蒙索
    1090索恩河畔蒙梅尔
    1100 preMONT
    1100阿尔邦
    1100距离Bouvent
    1100热奥夫雷塞
    1100瓦约纳克斯
    1100 VEYZIAT
    1110 ARANC
    1110 BRENOD
    1110尚多尔
    1110科尔塞勒];
   }）;

和HTML是这样的：

 ＆LT; DIV NG控制器=mainCtrl＆GT;
   ＆LT;跨度类=列表组项＆GT;
      ＆LT; A HREF =＃NG-模式=zip_ code可编辑的文本=zip_ code电子预输入=城市城市Zip_City_options |过滤器：$ viewValue | limitTo：8 ＆GT;
         {{zip_ code || '58 .29C'}}
      ＆所述; / A＆GT;
   ＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;

解决方案

控制器更改为以下

  VAR payApp = angular.module（'工资'，[xeditable，ui.bootstrap]）;    payApp.controller（'mainCtrl'，函数（$范围，$ HTTP，$窗口，$位置$过滤器）{
    $ scope.Zip_City_options = [1000布雷斯地区布尔格
        1000 BROU
        1000圣丹尼斯LES BOURG
        1090 AMAREINS
        1090 AMAREINS夫朗舍兰CES
        1090 CESSEINS
        1090热努约
        1090盖兰
        1090 LURCY
        1090蒙索
        1090索恩河畔蒙梅尔
        1100 preMONT
        1100阿尔邦
        1100距离Bouvent
        1100热奥夫雷塞
        1100瓦约纳克斯
        1100 VEYZIAT
        1110 ARANC
        1110 BRENOD
        1110尚多尔
        1110科尔塞勒];    $ scope.model = {
       zip_ code：空
    };
}）;

您的标记更改为以下

 ＆LT; DIV NG控制器=mainCtrl＆GT;
    ＆LT;跨度类=列表组项＆GT;
    ＆LT; A HREF =＃可编辑的文本=model.zip_ code电子预输入=城市城市Zip_City_options |过滤器：$ viewValue | limitTo：8＆GT;
          {{zip_ code || '58 .29C'}}
   ＆所述; / A＆GT;   ＆LT; / SPAN＆GT;
   ＆LT; / DIV＆GT;

Am using angular xeditable typehead directive to show autocomplete drop down. I am fetching data from a json file on page and using the jso array for e-typeahead. It is showing the matching values from array when I type something in input type. But when I select any value from list it is not updating the model as well as view.My file are looks like following:

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

And html is like:

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

解决方案

Change your controller to following

    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
    };
});

Change your markup to following

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

这篇关于Angularjs xeditable typehead没有更新的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！