javascript – Angular JS:ng-repeat with dynamic ng-model

我有这段代码重复多次,因此非常适合ng-repeat循环.
例如,我的代码的两个实例如下.
<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]);
    };

解决方法

在第一个示例中将ng-models绑定到searchParameters.userName和searchParameters.userMail时,必须在ng-repeat中使用searchParameters [param.param]作为ng-model.也像其他人说的那样,你不需要使用$index,你的对象作为ng-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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...