Angular JS：ng-repeat with dynamic ng-model

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.

我有这段代码重复多次,因此对于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>

This is the filterParamDisplay array in Javascript:

这是Javascript中的filterParamDisplay数组:

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

我一直试图将其转换为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>

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!

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

---

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.

仍然在使用$ 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]);
    };

4 个解决方案

#1

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.

在第一个示例中将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>

Here is working FIDDLE

这是FIDDLE

#2

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

Jsfiddler link this one for get a single object like 'username' or 'email'

Jsfiddler将此链接用于获取“用户名”或“电子邮件”等单个对象

you want single value in ng-show and ng-click use above one. or other wise use belowed one.

你想在ng-show和ng-click使用上面的单个值。或其他明智的使用下面的一个。

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

Jsfiddler link this one is get whole object based on the control

Jsfiddler链接这一个是基于控件得到整个对象

this will passes the whole set of object list.

这将传递整个对象列表集。

#3

You don't need to interpolate angular variables inside ng-* directives.

您不需要在ng- *指令内插入角度变量。

Try:

HTML:

<div ng-repeat="p in filterParamDisplay">
    <input type="text" ng-model="searchParams[p]" placeholder="{{p.displayName}}"/>
    <i ng-click="printme(p.param)">click</i>
</div>

Controller:

$scope.filterParamDisplay = [
    {param: 'userName', displayName: 'User Name'},
    {param: 'userEmail', displayName: 'User Email'}
];
$scope.printme = function(v) {
    console.log(v);
};

jsfiddle

#4

As @aarosil said you do not need to use $index. I wrote a small jsfiddle, I don't know your logic behind showParam so I mocked it.

正如@aarosil所说,你不需要使用$ index。我写了一个小jsfiddle,我不知道你在showParam背后的逻辑,所以我嘲笑它。

View :

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

and controller :

和控制器:

$scope.searchParams = {};  
$scope.filterParamDisplay = [
    {param: 'userName', displayName: 'User Name'},
    {param: 'userEmail', displayName: 'User Email'}
];
$scope.resetSearchField = function(param){
  $scope.searchParams[param.param] = "";
};
$scope.showParam = function(param){ ... }

http://jsfiddle.net/29bh7dxe/1/