代码之家 › 专栏 › 技术社区 › its me

如何根据选择自动完成输入?

angularjs javascript

-1

its me · 技术社区 · 6 年前

我想根据所选内容自动完成输入。例如,如果我选择 laptop 我想在输入中填充“5677”。另外,如果我按 Submit 我想看看选择的原始数据:

{
    "Type": "laptop",
    "value": "5677"
}

但是,我得到一个这样的嵌套对象:

{
  "Type": {
    "Type": "laptop",
    "value": "5677"
  }
}

这是 fiddle . 以下是我的资料:

angular
  .module('MdAutocompleteBugApp', ['ngMaterial'])
  .controller('MdAutocompleteBugController', function ($scope, $q, $timeout) {

    $scope.data = {};
    $scope.save = function () {
      console.log($scope.data);
      console.log("dd");
    }

    $scope.datas = [
      {"Type": "Mobile","value": "2400"}, 
      {"Type": "laptop","value": "5677"}, 
      {"Type": "Mobile","value": ""},
      {"Type": "tv",}
    ];

    var elementId = [];

    $scope.newArr = $scope.datas.filter(el => {
      if (elementId.indexOf(el.Type) === -1) {
        elementId.push(el.Type);
        return true;
      }
    });
    $scope.getMatches = function (searchText) {
      var configs = $scope.newArr.filter(function (config) {
        return (config.Type.toUpperCase().indexOf(searchText.toUpperCase()) !== -1);
      });
      return configs;
    }
  });

<div ng-app="MdAutocompleteBugApp">
  <div ng-controller="MdAutocompleteBugController as vm">
    <form name = "test" ng-submit="save()">
      <md-toolbar class="md-padding">

        <md-autocomplete 
          md-selected-item="data.Type" 
          md-search-text="searchText" 
          md-items="item in getMatches(searchText)" 
          md-item-text="item.Type" 
          placeholder="Search states" 
          md-no-cache="true">
          <md-item-template>
            <span>{{item.Type}} </span>
          </md-item-template> 
        </md-autocomplete>

      </md-toolbar><br>

      Value <input type="text" ng-model="data.value"><br><br><br>
      <button type="submit">submit</button>

    </form>
  </div>
</div>

1 回复 | 直到 6 年前

its me 6 年前

我们需要添加“md selected item change=”selecteditemchange(item)“”,在那里我们可以将数据传递到输入字段,我们可以得到我们想要的输出。

$scope.selectedItemChange = function(item)
{
if(item){
$scope.data.Type = item.Type;
$scope.data.Value = item.Value;
}

}

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前