Angular.js: <input/>जब एनजी-मॉडल सीधे एनजी-रिपीट ऐरे को संदर्भित करता है तो फोकस खो देता है

को निर्मित 18 नव॰ 2015 · 10टिप्पणियाँ · स्रोत: angular/angular.js

मेरे पास <input> अंदर एक साधारण <div ng-repeat...">

जैसे ही मैं एक चरित्र टाइप करता हूं <input> फोकस खो जाता है। टाइप करना जारी रखने के लिए मुझे सबसे पहले _each_ वर्ण के लिए इनपुट क्षेत्र के अंदर क्लिक करना होगा जिसे मैं दर्ज करना चाहता हूं।

समस्या को दिखाने वाले एनजी-रिपीट कोड का सार है:

<div ng-repeat="item in items">
    <input ng-model="items[$index]">
</div>

हालांकि, <input> ng-repeat दायरे के अंदर लेकिन जो सीधे ng-repeat सरणी का संदर्भ नहीं देता है, ठीक काम करता है - मैं पूरे दिन डेटा दर्ज कर सकता हूं। उदाहरण के लिए:

<div ng-repeat="item in items">
    <input ng-model="george">
</div>

नोट: समस्या स्पष्ट रूप से ng-model से संबंधित है जो सीधे आइटम सरणी में $index -th तत्व को संदर्भित करता है। मेरा अनुमान है कि संग्रह पर एक $घड़ी चालू हो जाती है और इससे फोकस का नुकसान होता है।

यहाँ एक codepen है जो समस्या दिखाता है:
http://codepen.io/djmarcus/pen/bVZGvj

यहाँ एक आसवन है:

    <div ng-controller="myCtrl">
        <div ng-repeat="item in items">
          <div>This fails</div>
          <div layout="row" layout-align="start center">
            <input ng-model="items[$index]"  label=""> 
          </div>
        </div>

        <div ng-repeat="item in items">
          <div>This works</div>
          <div layout="row" layout-align="start center">
            <input ng-model="george"  label=""> 
          </div>
        </div>

        <div>This works (its outside of ng-repeat) </div>
        <input ng-model="harvey" label="">
    </div>

ngRepeat investigation

स्रोत

djmarcus1

सबसे उपयोगी टिप्पणी

मुझे लगता है कि यह अपेक्षित व्यवहार है।

जैसा कि @Narretz ने उल्लेख किया है, आप एक सरणी पर दोहरा रहे हैं और आप सरणी के आइटम बदल रहे हैं (ध्यान दें कि आपके आइटम स्ट्रिंग हैं, जो जेएस में प्राइमेटिव हैं और इस प्रकार "मूल्य से" तुलना की जाती है)। चूंकि नई वस्तुओं का पता चला है, पुराने तत्वों को डीओएम से हटा दिया जाता है और नए बनाए जाते हैं (जो स्पष्ट रूप से फोकस नहीं करते हैं)।

वांछित व्यवहार प्राप्त करने के कई तरीके हैं:

~~ngRepeat के चाइल्ड स्कोप में बनाए गए स्थानीय item वैरिएबल का उपयोग करें:~~ दरअसल, इस मामले में 2-वे बाइंडिंग के लिए काम नहीं कर रहा है। विकल्प 2 या 3 का प्रयोग करें।

html <div ng-repeat="item in items"> <input type="text" ng-model="item" /> </div>

track by $index उपयोग करें (यदि यह आपके उपयोगकेस के लिए उपयुक्त है, यानी आप जानते हैं कि आइटम पुन: व्यवस्थित नहीं किए जाएंगे):

html <div ng-repeat="item in items track by $index"> <input type="text" ng-model="items[$index]" /> </div>

अपने तारों को वस्तुओं में लपेटें। जैसे items = [{value: 'string1'}, {value: 'string2'}, ...] :

html <div ng-repeat="item in items"> <input type="text" ng-model="items[$index].value" /> </div>

आप इस डेमो पेन में सभी 3 समाधानों को क्रिया में देख सकते हैं।

gkalpak 18 नव॰ 2015

👍16 🎉5 ❤2

सभी 10 टिप्पणियाँ

मुझे लगता है कि कहीं न कहीं एक संबंधित मुद्दा तैर रहा है, लेकिन ऐसा इसलिए था क्योंकि दोहराए गए तत्वों को स्थानांतरित कर दिया गया था, जिससे उनका ध्यान केंद्रित हो गया था। चूंकि इस उदाहरण में, कोई DOM पुन: क्रम नहीं होना चाहिए, इसके लिए एक जांच की आवश्यकता है।

Narretz 18 नव॰ 2015

मुझे लगता है कि यह अपेक्षित व्यवहार है।

वांछित व्यवहार प्राप्त करने के कई तरीके हैं:

~~ngRepeat के चाइल्ड स्कोप में बनाए गए स्थानीय item वैरिएबल का उपयोग करें:~~ दरअसल, इस मामले में 2-वे बाइंडिंग के लिए काम नहीं कर रहा है। विकल्प 2 या 3 का प्रयोग करें।

html <div ng-repeat="item in items"> <input type="text" ng-model="item" /> </div>

track by $index उपयोग करें (यदि यह आपके उपयोगकेस के लिए उपयुक्त है, यानी आप जानते हैं कि आइटम पुन: व्यवस्थित नहीं किए जाएंगे):

html <div ng-repeat="item in items track by $index"> <input type="text" ng-model="items[$index]" /> </div>

अपने तारों को वस्तुओं में लपेटें। जैसे items = [{value: 'string1'}, {value: 'string2'}, ...] :

html <div ng-repeat="item in items"> <input type="text" ng-model="items[$index].value" /> </div>

आप इस डेमो पेन में सभी 3 समाधानों को क्रिया में देख सकते हैं।

gkalpak 18 नव॰ 2015

👍16 🎉5 ❤2

धन्यवाद @gkalpak। आप सही हैं, व्यवहार अपेक्षित है।

Narretz 19 नव॰ 2015

मैंने विकल्प #3 का उपयोग करके समाप्त किया। इस मुद्दे को स्पष्ट करने के लिए धन्यवाद (अंत में यह स्पष्ट है)।

अगर एंगुलर 'गॉचा' मुद्दों पर कुछ दस्तावेज थे तो यह मदद करेगा .. यह उस सूची के लिए एक प्रमुख उम्मीदवार है।

djmarcus1 19 नव॰ 2015

टीबीएच, मुझे उम्मीद है कि आप विकल्प # 1 का पालन करेंगे। इस तरह इसका उपयोग करना काफी सामान्य है - मुझे आश्चर्य है कि आप इसका उपयोग क्यों नहीं कर सकते (यदि कोई विशिष्ट कारण है)।

gkalpak 19 नव॰ 2015

विकल्प # 1 (जैसा कि कोडपेन में कोडित है) वह है जो मैं मूल रूप से उपयोग कर रहा था। ऊपर दिए गए कारणों से यह काम नहीं करता (कम से कम जब मैं इसे कोडपेन में आज़माता हूं) ... शायद आपका मतलब कोडपेन में कुछ अलग था?

फिर भी, विकल्प #3 मेरे कोड से सबसे निकट से संबंधित है। जिस सरणी पर मैं ng-repeat वास्तव में वस्तुओं की एक सरणी है (साधारण तार नहीं) जहां मेरी रुचि गुणों में से एक में है .. इसलिए विकल्प # 3 एक अच्छा मैच है।

djmarcus1 19 नव॰ 2015

[विकल्प #1] काम नहीं करता (कम से कम जब मैं इसे कोडपेन में आज़माता हूं)

उफ़, तुम सही हो। विकल्प #1 ngModel माध्यम से 2-तरफा बाध्यकारी के लिए उपयुक्त नहीं है।
(भविष्य के पाठकों के लिए भ्रम से बचने के लिए मैंने अपनी पिछली टिप्पणी अपडेट की।)

gkalpak 20 नव॰ 2015

दृष्टिकोण #2 @gkalpak द्वारा समस्या को ठीक किया। हालांकि मुझे एंगुलर 2 में इसकी जरूरत थी। समाधान के लिए धन्यवाद।

bkottapally 17 फ़र॰ 2017

यदि आप इस धागे पर ठोकर खाई हैं और एंगुलर 2 में समाधान ढूंढ रहे हैं, तो समाधान काफी सरल है।
सरणी के साथ दो तरह से बाध्यकारी होने के बजाय, केवल संपत्ति को बांधें और 'इनपुट' के बजाय 'परिवर्तन' ईवेंट का उपयोग करके परिवर्तन ईवेंट को संभालें

उदाहरण:

// Instead of writing
<div *ngFor="let param of params.value; let id = index;">
    <input type="text" placeholder="0" [(ngModel)]="params.value[id]">
</div

// Write
<div *ngFor="let param of params.value; let id = index;">
    <input type="text" placeholder="0" [ngModel]="params.value[id]" (change)="onValueUpdate($event, id)">
</div>

और मान को onValueUpdate फ़ंक्शन में अपडेट करें।

चूंकि परिवर्तन घटना केवल तभी ट्रिगर होती है जब आप इनपुट से धुंधला हो जाते हैं, अब आपको त्रुटि का सामना नहीं करना पड़ेगा।

abhi9bakshi 11 अग॰ 2017

👍4

धन्यवाद @gkalpak
यह मेरे लिए काम किया। मैं विकल्प 3 के साथ समाप्त हुआ। यह कोणीय 4 के लिए भी काम करता है

Sathish-Krish 15 मार्च 2018

🎉1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Angular.js: <input/>जब एनजी-मॉडल सीधे एनजी-रिपीट ऐरे को संदर्भित करता है तो फोकस खो देता है

सबसे उपयोगी टिप्पणी

सभी 10 टिप्पणियाँ

संबंधित मुद्दों