कोणीय जेएस: गतिशील एनजी-मॉडल

Question

के साथ ng-repeat मेरे पास यह काम कर रहा है कोड का टुकड़ा जो कई बार दोहराया जाता है, इसलिए एनजी-दोहराना लूप के लिए बहुत अच्छा होगा। उदाहरण के लिए, मेरे कोड के दो उदाहरण निम्न हैं।

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

मुझे लगता है कि ऐसा करने के लिए एक पाश एनजी-दोहराने में प्रयास कर रहे हैं, लेकिन सफलता नहीं मिली अब तक:

<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 सरणी है। यही वह है जिसे मैंने एटीएम कोड किया है।

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

समस्याओं से ऊपर एनजी मॉडल चर में हैं, और एनजी-क्लिक करें और एनजी शो में $ सूचकांक में। सुनिश्चित नहीं है कि यह बिल्कुल किया जा सकता है, किसी भी मदद की बहुत सराहना की है, धन्यवाद!

---

अद्यतन: सभी प्रश्नों के उत्तर के लिए धन्यवाद, का उपयोग कर

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

बढ़िया काम करता है!

अभी भी शोपाराम और रीसेटशर्चफ़ाइल फ़ंक्शंस पर संघर्ष कर रहा है जो अभी तक $ अनुक्रमणिका का उपयोग करके ठीक से काम नहीं करते हैं। मेरा कोड यहाँ है।

$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

जैसा कि आप अपने उदाहरण के लिए searchParameters.userName और searchParameters.userMail पर अपने एनजी-मॉडल को बांधते हैं, आपको एनजी-दोहराना में एनजी-मॉडल के लिए searchParameters[param.param] का उपयोग करना होगा। अन्य लोगों की तरह, आपको $ इंडेक्स का उपयोग करने की आवश्यकता नहीं है, आपको एनजी-दोहराने के दायरे में 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 लिखा, मैं शोपाराम के पीछे अपना तर्क नहीं जानता इसलिए मैंने इसे मजाक किया।

दृश्य:

<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 में एकल मान चाहते हैं जी-शो और एनजी-क्लिक एक से ऊपर का उपयोग करें। या नीचे दिए गए अन्य बुद्धिमान उपयोग।

<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

इस वसीयत वस्तु सूची के पूरे सेट से गुजरता है।