Angular JS:使用动态 ng-model 进行 ng-repeat [英] Angular JS: ng-repeat with dynamic ng-model

问题描述

我有这段 工作 重复多次的代码，因此非常适合 ng-repeat 循环.例如，我的代码的两个实例如下.

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

这是 JavaScript 中的 filterParamDisplay 数组:

 $scope.filterParamDisplay = [{参数:'用户名'，显示名:'用户名'}，{param: 'userEmail', displayName: '用户邮箱'}];

我一直试图在 ng-repeat 循环中做到这一点，但到目前为止没有成功.这是我编码的atm.

 
<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>

问题出在上面的 ng-model 变量中，以及 ng-click 和 ng-show 中的 $index 中.不确定这是否可以完成，非常感谢任何帮助，谢谢！

<小时>

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

 
...ng-model="searchParams[p]"

效果很好！

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

 $scope.searchParams = $state.current.data.defaultSearchParams;$scope.resetSearchField = 函数(searchParam){$scope.searchParams[searchParam] = '';};$scope.showParam = 函数(参数){返回 angular.isDefined($scope.searchParams[param]);};

解决方案

在第一个示例中，当您将 ng-model 绑定到 searchParameters.userName 和 searchParameters.userMail 时，您必须在 ng-repeat 中为 ng-model 使用 searchParameters[param.param].也像其他人说的那样，你不需要使用 $index，你的对象作为 param 在 ng-repeat 范围内.

<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>

这里正在运行 FIDDLE

I have this working piece of code that is repeated multiple times, hence would be great for a ng-repeat loop. For example, two instances of my code are the following.

    <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>

This is the filterParamDisplay array in Javascript:

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

I have been trying to do that into a ng-repeat loop, but without success so far. This is what I have coded atm.

    <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>

The problems are into the ng-model variable above, and into the $index in the ng-click and ng-show. Not sure if this can be done at all, any help is much appreciated, thanks!

---

UPDATE: Thanks for all the answers, using

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

Works great!

Still struggling on the showParam and resetSearchField functions which do not work properly yet using $index. Here is my code.

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

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

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

解决方案

As you bind your ng-models to searchParameters.userName and searchParameters.userMail at first example, you must use searchParameters[param.param] for ng-model in ng-repeat. Also like others said, you don't need to use $index, you got your object as param in ng-repeat scope.

<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>

Here is working FIDDLE

这篇关于Angular JS:使用动态 ng-model 进行 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！