Javascript 选择列表上的多个添加项

I将输入数据表单创建为图像：

当我在inputext1中输入国家数据时，选择下面的列表加载有关州的数据，以便选择州。当我创建每一行表单数据输入时，它工作得很好。但如果我创建了多行表单数据输入，我得到的数据状态就是我选择的结束国家的状态

我的输入文本1：

<span editable-text="data.country" e-name="country"
    e-typeahead-wait-ms="100"
    e-typeahead="country in countries  | filter: $viewValue | limitTo:8" e-typeahead-on-select='onSelect($item)'
    e-ng-readonly="isDisable(data)"  e-form="rowform"
    onbeforesave="validateCountry($data)" e-required class="dropdown"
    on-toggle="toggled(open)"> <a href class="dropdown-toggle">
            {{ data.country }} </a>
</span>

---

是否有创建多行表单数据的建议？

这不是您问题的具体答案，但如果您找不到，我建议使用isteven multi-select，它更易于自定义，也更易于实现。它有多选、单选等

检查它：

吉特：

演示：

许可证： 麻省理工学院许可证（MIT）

版权所有（c）2014-2015伊格纳修斯·史蒂文（）

特此免费授予获得本软件及相关文档文件（“软件”）副本的任何人在不受限制的情况下经营本软件的权利，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或出售本软件副本的权利，并允许向其提供软件的人员在符合以下条件的情况下这样做：

上述版权声明和本许可声明应包含在软件的所有副本或实质部分中

本软件按“原样”提供，无任何明示或暗示的担保，包括但不限于适销性、特定用途适用性和非侵权性担保。在任何情况下，作者或版权持有人均不对任何索赔、损害赔偿或其他责任负责，无论是合同诉讼、侵权诉讼还是其他诉讼，均由本软件或本软件的使用或其他交易引起，或与本软件或本软件的使用或其他交易有关

<span editable-select="data.states" e-name="states" ng-width="30px" 
    e-form="rowform"    e-ng-readonly="isDisable(data)"
    e-ng-options="states.id as states.name for states in statesArr "
     e-required></span>{{showStatesName(data.states)}}

$scope.data = [];
$scope.countries = [];
$scope.statesArr = [];

$scope.loadData = function() {
    $http.get(loadDataURL, config).success(function(data) {
        $scope.totalItems = data.totalItems;
        $scope.data = data.pageItems;

        $http.get(getCountriesURL, config).success(function(data) {          
            $scope.countries = data;
        });
    });
};

$scope.onSelect(item) {
    $http.get(getStatesURL, config).success(function(data) {
        $scope.statesArr = data;
    });
}