Angular JS:ng-repeat with dynamic ng-model [英] Angular JS: ng-repeat with dynamic ng-model
问题描述
我有这个工作的代码片段,它重复多次,因此非常适合ng-repeat循环。
例如,我的代码的两个实例如下。
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>
这是Javascript中的filterParamDisplay数组:
This is the filterParamDisplay array in Javascript:
$scope.filterParamDisplay = [
{param: 'userName', displayName: 'User Name'},
{param: 'userEmail', displayName: 'User Email'}
];
我一直试图将其转换为ng-repeat循环,但到目前为止还没有成功。
这就是我编码的内容。
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>
问题出现在上面的ng-model变量中,进入ng-click中的$ index和ng-show。
不确定是否可以这样做,非常感谢任何帮助,谢谢!
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]"
效果很好!
仍然在使用$ index无法正常工作的showParam和resetSearchField函数上挣扎。这是我的代码。
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]);
};
推荐答案
将ng-models绑定到 searchParameters.userName
和 searchParameters.userMail
在第一个示例中,您必须使用 searchParameters [param.param]
用于ng-repeat中的ng-model。也像其他人说的那样,你不需要使用$ index,你在ng-repeat范围内得到了你的对象 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-repeat with dynamic ng-model的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!