如何在ng-repeat或循环中使用md-chips

时间:2017-07-16 13:36:36

标签: javascript angularjs angular-material

我收到错误 TypeError:无法读取属性' some'未定义的      在

<div layout="column" style="background-color: #fff" layout-padding>
    <h1>MISTAKE TTYPES</h1>
    <div layout="column" ng-cloak>
        <div class="md-padding" layout="column">
            <form name="fruitForm">
                <div ng-repeat="items in [1,2]">
                    <md-chips ng-model="vm.selectedMistakes[$index]" md-autocomplete-snap
                              md-on-remove = "vm.removeChip($index)"
                              name="fruitName[$index]" >
                        <md-autocomplete
                            md-selected-item="vm.selectedItem[$parent.$index]"
                            md-no-cache="vm.noCache"
                            md-max-chips="1"
                            md-search-text="vm.searchText"
                            md-items="item in vm.mistakes"
                            md-item-text="item.name"
                            md-selected-item-change="vm.searchTextChange($index)"
                            placeholder={{vm.placeholder}}
                            name="fruitNameAuto[$parent.$index]">
                            <span md-highlight-text="vm.searchText">{{item.name}}</span>
                        </md-autocomplete>
                        <md-chip-template>
                    <span>
                      <strong>{{$chip.name}}</strong>
                    </span>
                        </md-chip-template>
                    </md-chips>
                </div>
            </form>
        </div>
    </div>
</div>

循环未定义,必须创建所有选定值的afinal数组。下面是每个输入字段只占用一个芯片的代码。

HTML

(function () {
    'use strict';

    angular
        .module('app')
        .controller('chipsCtrl', chipsCtrl);

    /* @ngInject */
    function chipsCtrl($q,$timeout) {
        var vm = this;
        vm.selectedItem = null;
        vm.searchText = null;
        vm.mistakes = loadMistakes();
        vm.selectedMistakes = [[],[]];
        vm.transformChip = transformChip;
        vm.searchTextChange = searchTextChange;
        vm.removeChip = removeChip;

        /**
         * Return the proper object when the append is called.
         */
        function transformChip(chip) {
            console.log(chip);
            // If it is an object, it's already a known chip
            if (angular.isObject(chip)) {
                return chip;
            }
            // Otherwise, create a new one
            return { name: chip, id: 1 }

        }
        vm.placeholder = "Select Mistake Type";

        function searchTextChange(index) {

            //console.log(vm.selectedMistakes);
            vm.searchText = null;
            if(vm.selectedMistakes[index]){
                vm.placeholder = (vm.selectedMistakes[index].length > 0) ? "Just 1 allowed" : "Select Mistake Type";
            }

        }

        function removeChip(index){
            vm.placeholder = (vm.selectedMistakes[index].length > 0) ? "Just 1 allowed" : "Select Mistake Type";
        }

        function loadMistakes() {
            return  [
                {
                    'name': 'Simple',
                    'id': 1
                },
                {
                    'name': 'Conceptual',
                    'id': 2
                },
                {
                    'name': 'Silly',
                    'id': 3
                },
                {
                    'name': 'Visual',
                    'id': 4
                },
                {
                    'name': 'dilemma',
                    'id': 5
                }
            ];
        }
    }
})();

控制器

vm.selectedMistakes = [
  [
    {
      "name": "Conceptual",
      "id": 2
    }
  ],
  [
    {
      "name": "Simple",
      "id": 1
    }
  ]
]

预期输出

webView.setWebViewClient(new WebViewClient(){
        @Override
        public void onLoadResource(WebView view, String url) {
            super.onLoadResource(view, url);
            Log.d(TAG, "onLoadResource: " + url);
        }
    });

我对这两个输入都有触发值 enter image description here

0 个答案:

没有答案