AngularJS में एनजी-रिपीट लूप के अंदर एनजी-मॉडल को बांधना

Question

मैं एक एनजी-रिपीट लूप के अंदर स्कोप के मुद्दे से निपटने की कोशिश कर रहा हूं - मैंने काफी कुछ सवाल निकाले हैं, लेकिन काम करने के लिए अपने कोड को प्राप्त करने में सक्षम नहीं हूं।

नियंत्रक कोड:

function Ctrl($scope) {
  $scope.lines = [{text: 'res1'}, {text:'res2'}];
}

राय:

<div ng-app>
     <div ng-controller="Ctrl">
       <div ng-repeat="line in lines">
           <div class="preview">{{text}}{{$index}}</div>

       </div>
       <div ng-repeat="line in lines">
           <-- typing here should auto update it's preview above -->
           <input value="{{line.text}}" ng-model="text{{$index}}"/>
            <!-- many other fields here that will also affect the preview -->
       </div>
     </div>
    </div>

यहाँ एक पहेली है: http://jsfiddle.net/cyberwombat/zqTah/

मूल रूप से मेरे पास एक ऑब्जेक्ट है (यह एक फ्लायर जनरेटर है) जिसमें पाठ की कई लाइनें हैं। पाठ की प्रत्येक पंक्ति को उपयोगकर्ता (पाठ, फ़ॉन्ट, आकार, रंग, आदि) द्वारा ट्वीक किया जा सकता है और मैं इसके लिए एक पूर्वावलोकन बनाना चाहता हूं। ऊपर दिया गया उदाहरण केवल पाठ में प्रवेश करने के लिए इनपुट क्षेत्र को दिखाता है और मैं चाहूंगा कि स्वचालित रूप से / जैसा कि आप-प्रकार-प्रकार पूर्वावलोकन पूर्वावलोकन को अपडेट करें लेकिन कई और नियंत्रण होंगे।

मुझे यह भी निश्चित नहीं है कि मुझे लूपिंग इंडेक्स के लिए कोड सही मिला है - क्या यह लूप के अंदर एनजी-मॉडल नाम बनाने का सबसे अच्छा तरीका है?

Comments

काम नहीं लगता है ..

— philx_x

Answer 1

एनजी-रिपीट लूप के प्रत्येक पुनरावृत्ति के लिए, lineआपके ऐरे में किसी ऑब्जेक्ट का संदर्भ है। इसलिए, मान का पूर्वावलोकन करने के लिए, उपयोग करें {{line.text}}।

इसी तरह, पाठ को डेटाबाइंड करने के लिए, उसी पर डेटाबाइंड करें ng-model="line.text":। valueएनजी-मॉडल (वास्तव में आपको नहीं करना चाहिए) का उपयोग करते समय आपको उपयोग करने की आवश्यकता नहीं है।

फील करना ।

स्कोप और एनजी-रिपीट पर अधिक गहराई से देखने के लिए, देखें कि एंगुलरजेएस में स्कोप प्रोटोटाइप / प्रोटोटाइप इनहेरिटेंस की बारीकियां क्या हैं? , अनुभाग एनजी-रिपीट ।

Comments

इस कोड के e2e परीक्षण के बारे में क्या? मेरा मतलब है कि अगर यह गतिशील है तो इनपुट का चयन कैसे करें?

— देवमाओ

क्या वस्तुओं को पुनरावृत्त होने के लिए वस्तुओं होना चाहिए? दूसरे शब्दों में, वे आदिम नहीं हो सकते, जैसे तार, जैसे $ गुंजाइश.lines = ['ए', 'बी', 'सी']?

— बर्टो

@berto, हाँ, वे ऑब्जेक्ट होना चाहिए। इससे जुड़े संदर्भ में चर्चा की जाती है, "स्कोप प्रोटोटाइप की बारीकियां क्या हैं ..."।

— मार्क राजकोक

मुझे एक समान एनजी-रिपीट / एनजी-मॉडल मुद्दा मिला है। मैंने कुछ शोध किया है और मुझे लगता है कि मैं लगभग वहाँ हूँ। अगर कोई देख सकता है तो मैं वास्तव में इसकी सराहना करूंगा। stackoverflow.com/questions/32855575/…

— user1532669

Answer 2

<h4>Order List</h4>
<ul>
    <li ng-repeat="val in filter_option.order">
        <span>
            <input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" />
            &nbsp;{{filter_option.order_name[$index]}}
        </span>
        <select title="" ng-model="filter_param[val]">
            <option value="asc">Asc</option>
            <option value="desc">Desc</option>
        </select>
    </li>
</ul>