Angular JS：ng-repeat with dynamic ng-model

Question

我有這個工作一段重複多次的代碼，因此對於一個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> 

這是filterParamDisplay陣列在Javascript：

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

我一直在嘗試這樣做，到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-model變量和ng-click和ng-show中的$ index中。 不知道這是否可以完成，任何幫助非常感謝，謝謝！

---

UPDATE： 感謝所有的答案，使用

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

的偉大工程！

仍在showParam和resetSearchField函數中掙扎，這些函數在使用$ index時無法正常工作。這是我的代碼。

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

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

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

Answer 1

當您在第一個示例中將ng模型綁定到searchParameters.userName和searchParameters.userMail時，必須在ng-repeat中使用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> 

這裏工作FIDDLE

Answer 2

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

嘗試：

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> 

控制器：

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

jsfiddle

Answer 3

正如@aarosil說你不需要使用$index。 我寫了一個小jsfiddle，我不知道你的邏輯背後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> 

和控制器：

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

Answer 4

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

要在N個單值g-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

這將通過一整套對象名單。