Javascript 角度JS:ng重复与动态ng模型

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

我一直在尝试把它变成一个ng重复循环，但到目前为止没有成功。 这是我在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-*

指令中插入角度变量

尝试：

HTML:

---

正如@aarosil所说，您不需要使用

$index

。 我写了一个小JSFIDLE，我不知道showParam背后的逻辑，所以我嘲笑了它

视图：

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

{{searchParams}}

您希望在ng show中使用单个值，并在一个值上方单击ng use。或其他明智的使用下面的一个

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

{{searchParams}}

---

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

当您将ng模型绑定到

searchParameters.userName

和

searchParameters.userMail

时，在第一个示例中，您必须在ng中对ng模型使用

searchParameters[param.param]

。正如其他人所说，您不需要使用$index，您的对象在ng repeat作用域中是

param

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

---

这里正在运行

您不需要执行

showParam（filterParamDisplay[$index]）

ShowParam（param）

本身应该可以工作，因为

param

是由

ngRepeat

设置的，

searchParams

字段一定有问题。您能否共享包含

searchParams

和

resetSearchField

的js。

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

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

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

$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){ ... }

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

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

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