JS góc: ng-repeat với động ng-mô hình

Question

Tôi có điều này mảnh làm việc mã được lặp đi lặp lại nhiều lần, do đó sẽ là tuyệt vời cho một vòng lặp ng-repeat. Ví dụ, hai trường hợp mã của tôi là như sau.

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

Đây là mảng filterParamDisplay trong Javascript:

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

Tôi đã cố gắng để làm điều đó vào một vòng lặp ng-repeat, nhưng không thành công cho đến nay. Đây là những gì tôi đã mã hóa 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> 

Các vấn đề nằm trong biến ng-model ở trên và vào chỉ mục $ trong ng-click và ng-show. Không chắc chắn nếu điều này có thể được thực hiện ở tất cả, bất kỳ trợ giúp được nhiều đánh giá cao, cảm ơn!

---

UPDATE: Cảm ơn tất cả các câu trả lời, sử dụng

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

Các công trình lớn!

Vẫn đang vật lộn trên showParam và resetSearchField chức năng không hoạt động đúng cách nhưng sử dụng $ index. Đây là mã của tôi.

$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

Khi bạn liên kết các mô hình ng của mình thành searchParameters.userName và searchParameters.userMail ở ví dụ đầu tiên, bạn phải sử dụng searchParameters[param.param] cho ng-model trong ng-lặp lại. Cũng giống như những người khác nói, bạn không cần phải sử dụng chỉ số $, bạn có đối tượng của bạn như param trong phạm vi ng-lặp lại.

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

đây đang làm việc FIDDLE

Answer 2

Bạn không cần phải suy biến góc bên ng-* chỉ thị.

Hãy thử:

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> 

Bộ điều khiển:

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

jsfiddle

Answer 3

Như @aarosil nói bạn không cần phải sử dụng $index. Tôi đã viết một jsfiddle nhỏ, tôi không biết logic của bạn đằng sau showParam vì vậy tôi đã chế nhạo nó.

Xem:

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

và điều khiển:

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

bạn muốn giá trị duy nhất trong n g-show và ng-click sử dụng trên một. hoặc sử dụng khôn ngoan khác dưới một.

<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

điều này sẽ vượt qua toàn bộ các danh sách đối tượng.