Question

我正面临AngularJS的问题。我已经创建了一个用户可以使用的应用程序从下拉列表中选择一个值。如果用户按下“添加”按钮，则会创建一个包含所有选择的数组。我想用所有这些选项填充文本框。我尝试过ng-repeat但它会为每个数组值创建多个文本框。这是我到目前为止所做的：

控制器

$scope.multiCompare= [];

// Create the function to push the data into the "multiCompare" array
$scope.newCompare = function () {

    $scope.multiCompare.push($scope.compareDate);


    $scope.multiComparedate = '';



};

HTML

<div class="form-group">
                <label for="installation_year" class="col-sm-2 control-label">Period</label>
                <div class="col-sm-4">
                    <select class="form-control" ng-model="compareDate" ng-options="res for res in compareDates " ng-disabled="disableFormInput()" ></select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default" ng-click="newCompare()">Add</button>
                     </div>
            </div>
            <div class="form-group">
                <label for="from_date" class="col-sm-2 control-label">Compare</label>
                <div class="col-sm-4">
                    <div ng-repeat="num in multiCompare" track by $index>
                        <input class="form-control" type="text" ng-model="$parent.multiCompare[$index]">
                        <div> {{num}}</div>
                    </div>
                </div>

第一张图片显示了我在添加2013年和2014年时获得的结果，第二张图片显示了我希望它返回的结果。

This is the result I'm getting

This is what I want it to show

有人可以帮我解决这个问题吗？提前谢谢..

Answer 1

为了渲染比较字段输入，您可以使用ngList指令。这会将逗号（，）分隔的输出直接绑定到输入元素。

更改

<label for="from_date" class="col-sm-2 control-label">Compare</label> <div class="col-sm-4"> <div ng-repeat="num in multiCompare" track by $index> <input class="form-control" type="text" ng-model="$parent.multiCompare[$index]"> <div> {{num}}</div> </div> </div>

以

<label for="from_date" class="col-sm-2 control-label">Compare</label> <div class="col-sm-4"> <input class="form-control" type="text" ng-model="multiCompare" ng-list/> </div>

这可以帮到你，谢谢。

Answer 2

我设法做了我想做的事。我将我的HTML代码更改为：

<div class="form-group">
                <label for="from_date" class="col-sm-2 control-label">Compare</label>
                <div class="col-sm-4">
                    <div data-ng-repeat="num in multiCompare" track by $index>
                        <input class="form-control" type="text" ng-model="multiCompare" ng-list {{num}} ng-show="$last" />
                    </div>
                </div>
            </div>

它有效！你的ng-list建议真有帮助！非常感谢你！

AngularJS从数组填充文本框

2 个答案: