Angular JS:ng-repeat with dynamic ng-model

Question

我有这个工作的是重复多次的代码块,因此会为NG-重复循环是巨大的.例如,我的代码的两个实例如下.

    <div>
        <input type="text" ng-model="searchParamaters.userName" placeholder="User Name"/>
        <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[0].param)" ng-show="showParam(filterParamDisplay[0].param)"></i>
    </div>
    <div>
        <input type="text" ng-model="searchParamaters.userEmail" placeholder="User Email"/>
        <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[1].param)" ng-show="showParam(filterParamDisplay[1].param)"></i>
    </div>

这是Javascript中的filterParamDisplay数组:

    $scope.filterParamDisplay = [
        {param: 'userName', displayName: 'User Name'},
        {param: 'userEmail', displayName: 'User Email'}
    ];

我一直在尝试将其转换为ng-repeat循环,但到目前为止还没有成功.这就是我编码的内容.

    <div ng-repeat="param in filterParamDisplay">
        <input type="text" ng-model="searchParams[{{param}}]" placeholder="{{param.displayName}}"/>
        <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[$index].param)" ng-show="showParam(filterParamDisplay[$index].param)"></i>
    </div>

问题是上面的ng-model变量,以及ng-click和ng-show中的$ index.不确定是否可以这样做,非常感谢任何帮助,谢谢!

---

更新:感谢所有的答案,使用

     <div ng-repeat="p in filterParamDisplay">
...
   ng-model="searchParams[p]" 

效果很好!

仍然在使用$ index无法正常工作的showParam和resetSearchField函数上挣扎.这是我的代码.

    $scope.searchParams = $state.current.data.defaultSearchParams;

    $scope.resetSearchField = function (searchParam) {
        $scope.searchParams[searchParam] = '';
    };

    $scope.showParam = function (param) {
        return angular.isDefined($scope.searchParams[param]);
    };

Answer 1

当你绑定你的NG-模型searchParameters.userName,并searchParameters.userMail在第一个例子中,你必须使用searchParameters[param.param]在NG-重复NG-模型.也像其他人说的那样,你不需要使用$ index,你的对象就像paramng-repeat范围一样.

<div ng-repeat="param in filterParamDisplay">
    <input type="text" ng-model="searchParameters[param.param]" placeholder="{{param.displayName}}"/>
    <i class="fa fa-times" ng-click="resetSearchField(param.param)" ng-show="showParam(param.param)"></i>
</div>

这是FIDDLE