এনজি-মডেল, এনজি-রিপিট এবং ইনপুটগুলির সাথে অসুবিধা

116

আমি ব্যবহার করে ngRepeatএবং ব্যবহার করে আইটেমের একটি তালিকা সম্পাদনা করার জন্য ব্যবহারকারীকে অনুমতি দেওয়ার চেষ্টা করছি ngModel। ( এই ধাঁধাটি দেখুন ।) তবে, উভয় পদ্ধতির জন্য আমি উদ্ভট আচরণের দিকে এগিয়ে যাওয়ার চেষ্টা করেছি: একটি মডেল আপডেট করে না, এবং অন্যটি প্রতিটি কী-ডাউনটিতে ফর্মটি ঝাপসা করে।

আমি কি এখানে কিছু ভুল করছি? এটি কি সমর্থিত ব্যবহারের মামলা নয়?

সুবিধার্থে অনুলিপিযুক্ত ফিডল থেকে কোডটি এখানে:

<html ng-app>
    <head>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body ng-init="names = ['Sam', 'Harry', 'Sally']">
        <h1>Fun with Fields and ngModel</h1>
        <p>names: {{names}}</p>
        <h3>Binding to each element directly:</h3>
        <div ng-repeat="name in names">
            Value: {{name}}
            <input ng-model="name">                         
        </div>
        <p class="muted">The binding does not appear to be working: the value in the model is not changed.</p>
        <h3>Indexing into the array:</h3>
        <div ng-repeat="name in names">
            Value: {{names[$index]}}
            <input ng-model="names[$index]">                         
        </div>
        <p class="muted">Type one character, and the input field loses focus. However, the binding appears to be working correctly.</p>
    </body>
</html>

angularjs angularjs-ng-repeat angularjs-ng-model

— নিক হেইনার
সূত্র

1

এটি স্ট্যাকওভারফ্লো / প্রশ্নগুলি / 12977894/… এর সাথে খুব মিল , তবে ২ য় পন্থা এখানে নতুন, সুতরাং এটি হুবহু সদৃশ নয়। এনজি-রিপিট চাইল্ড স্কোপ কীভাবে কাজ করে তা ব্যাখ্যা করে আমি সেখানে একটি বিশদ উত্তর (আর্টেমের অনুরূপ) সরবরাহ করেছি।

— রাজকোক

যেহেতু শেষ পর্যন্ত এই থ্রেডটি সন্ধান করার আগে এটি আমার জন্য যুক্তিসঙ্গত পরিমাণ গুগলিংয়ের জন্য ব্যয় করেছে, তাই আমি এই নামটির মতো নামকরণ করতে পারি: "এনগ্রিপিট ইনপুটগুলি থেকে" প্যারেন্ট মডেল আপডেট হয় না "বা" এনজিআরপিট ব্যবহার করার সময় মডেল আপডেট হয় না "বা" এনগ্রিপিট ইনপুট (প্যারেন্ট) আবদ্ধ নয় " মডেল"? শিরোনামটির জন্য আপনার কাছে আরও ভাল ধারণা থাকতে পারে?

— vucalur

120

এটি একটি বাধ্যতামূলক বিষয় বলে মনে হচ্ছে।

পরামর্শটি আদিমদের সাথে আবদ্ধ নয় ।

আপনার ngRepeatসংগ্রহের অভ্যন্তরে স্ট্রিংগুলি দিয়ে পুনরাবৃত্তি হচ্ছে, যখন এটি বস্তুর উপর দিয়ে পুনরাবৃত্তি করা উচিত। আপনার সমস্যা সমাধানের জন্য

<body ng-init="models = [{name:'Sam'},{name:'Harry'},{name:'Sally'}]">
    <h1>Fun with Fields and ngModel</h1>
    <p>names: {{models}}</p>
    <h3>Binding to each element directly:</h3>
    <div ng-repeat="model in models">
        Value: {{model.name}}
        <input ng-model="model.name">                         
    </div>

জেএসফিডাল: http://jsfiddle.net/jaimem/rnw3u/5/

— Jaime
সূত্র

3

প্রথম হাইপারলিঙ্কের জন্য ধন্যবাদ, কারণ এটি ফোকাস / ঝাঁকুনির সমস্যাটির ঝাপসা / ক্ষতি ব্যাখ্যা করে। আমি সবসময় ভাবতাম কেন এমনটা হয়েছিল?

— রাজকোক

2

এর জন্য ধন্যবাদ, অনেক সাহায্য করেছেন। তবুও,

— আদিমদের

1

পুরানো পোস্ট তবে থানেক্স, আমাকে 'এনজিপিপিটের অভ্যন্তরে মডেলটি পরিবর্তন না করা' সমস্যাটি খুঁজে পেতে কিছুটা সময় নিয়েছিল এবং আদিমদের সাথে আবদ্ধ না হওয়ার জন্য আপনার পরামর্শটি ছিল

— স্টেফানোস চিআরস ২14

এছাড়াও: টাইপ করার সময় পুরো তালিকাটি সংশোধন করবেন না - একটি ট্র্যাপ যা আমি পড়েছিলাম। আমি সংগ্রহগুলি পরিবর্তনগুলির জন্য দেখছিলাম, এবং এটি একটি অভিন্ন অনুলিপি দ্বারা প্রতিস্থাপন করছি - তাই আমি আদিমদের কাছে বাধ্যতামূলক না হলেও উপাদানগুলি পুনরায় তৈরি করা হচ্ছিল।

— z0r

71

কৌণিক সর্বশেষ সংস্করণ (1.2.1) ব্যবহার করে ট্র্যাক করুন $index। এই সমস্যাটি স্থির

http://jsfiddle.net/rnw3u/53/

<div ng-repeat="(i, name) in names track by $index">
    Value: {{name}}
    <input ng-model="names[i]">                         
</div>

— Thilaga
সূত্র

কাজটি করেছেন; আর কোনও রেফারেন্স ক্ষতি নেই

— ড্যান ওচিয়ানা

আমি তার জন্য এতক্ষণ অনুসন্ধান করেছি .... এত সহজ ... ঠিক এতটা লুকানো। উত্তর হিসাবে এটি দিন!

— Andrea

ওহোহ, সুতরাং এনজি-রিপিটে "ট্র্যাক বাই $ ইনডেক্স" যুক্ত করা "

— ঝাঁকুনি

43

এনজিএমডেলকন্ট্রোলার দিয়ে স্কোপ , এনজিপিট এবং এনজি মডেল কীভাবে কাজ করে তা বোঝার দরকার হলে আপনি একটি কঠিন পরিস্থিতিতে পড়েন । 1.0.3 সংস্করণ ব্যবহার করার চেষ্টা করুন। আপনার উদাহরণটি কিছুটা ভিন্নভাবে কাজ করবে।

আপনি কেবল জেএম- এর সরবরাহিত সমাধানটি ব্যবহার করতে পারেন

তবে আপনি যদি পরিস্থিতি আরও গভীরভাবে মোকাবেলা করতে চান তবে আপনাকে বুঝতে হবে:

অ্যাঙ্গুলারজেএস কীভাবে কাজ করে ;
স্কোপগুলির একটি শ্রেণিবদ্ধ কাঠামো রয়েছে;
এনজিপিপিট প্রতিটি উপাদানগুলির জন্য নতুন সুযোগ তৈরি করে;
এনজিরিপিট অতিরিক্ত তথ্য (হ্যাশকি) সহ আইটেমগুলির ক্যাশে তৈরি করুন; প্রতিটি নতুন আইটেমের জন্য প্রতিটি ঘড়ির কলটিতে (এটি ক্যাশে নেই) এনজিপিপি নতুন স্কোপ, ডিওএম উপাদান ইত্যাদি তৈরি করে আরও বিশদ বিবরণ ।
০.০.৩ এনজি মডেলকন্ট্রোলার থেকে প্রকৃত মডেলের মানগুলি সরবরাহ করে।

অ্যাঙ্গুলারজেএস 1.0.3 এর জন্য আপনার উদাহরণ "সরাসরি প্রতিটি উপাদানকে বাঁধাই করা" কীভাবে কাজ করে:

আপনি 'f'ইনপুট মধ্যে চিঠি প্রবেশ ;
ngModelControllerআইটেমটি সুযোগ জন্য মডেল পরিবর্তন (নাম অ্যারের পরিবর্তন করা হয়) => name == 'Samf', names == ['Sam', 'Harry', 'Sally'];
$digest লুপ শুরু হয়েছে;
ngRepeat'Samf'অপরিবর্তিত নামের অ্যারে ( 'Sam') থেকে মান দ্বারা আইটেম স্কোপ ( ) থেকে মডেল মানকে প্রতিস্থাপন করে ;
ngModelControllerপ্রকৃত মডেল মান ( 'Sam') সহ ইনপুটকে রিরেন্ডার করে ।

আপনার উদাহরণ "অ্যারে ইনডেক্সিং" কীভাবে কাজ করে:

আপনি 'f'ইনপুট মধ্যে চিঠি প্রবেশ ;
ngModelControllerনামগুলিতে আইটেম পরিবর্তন করে array=> `নাম == ['সাম্ফ', 'হ্যারি', 'স্যালি'];
$ ডাইজেস্ট লুপ শুরু হয়েছে;
ngRepeat'Samf'ক্যাশে খুঁজে পাচ্ছি না;
ngRepeat নতুন সুযোগ তৈরি করে, নতুন ইনপুট সহ নতুন ডিভ উপাদান যুক্ত করে (এজন্য ইনপুট ক্ষেত্রটি ফোকাস হারিয়ে ফেলে - পুরানো ইনপুট সহ পুরাতন ডিভকে নতুন ইনপুট দিয়ে নতুন ডিভ দ্বারা প্রতিস্থাপন করা হয়);
নতুন DOM উপাদানগুলির জন্য নতুন মানগুলি রেন্ডার করা হয়।

এছাড়াও, আপনি অ্যাংুলার জেএস বাটারং ব্যবহার করার চেষ্টা করতে পারেন এবং আপনি যে ইনপুটটি প্রবেশ করেন তাতে কীভাবে ডিভের স্কোপের আইডি পরিবর্তন হয়।

— আর্টেম অ্যান্ড্রিভ
সূত্র

1.0.3 ব্যাখ্যার জন্য ধন্যবাদ। এটি আকর্ষণীয় যে ১.০.৩-এ, "সরাসরি বাঁধাই করুন" ক্ষেত্রে, ইনপুট ক্ষেত্রটি ভাঙ্গা বলে মনে হয়, এমন কোনও অর্থে যে এটি কোনও পরিবর্তন / টাইপ করা ইনপুট (কমপক্ষে ক্রোমে) গ্রহণ করবে বলে মনে হচ্ছে না। আমি নিশ্চিত যে অদূর ভবিষ্যতে আমরা এই সম্পর্কে বেশ কয়েকটি এসও পোস্ট দেখতে পাব :) আমি মনে করি যে এই নতুন উপায়টি আরও ভাল, কারণ এটি কিছুটা ভুল বলে আরও স্পষ্ট হবে।

— রাজকোক

6

আপনার যদি প্রতিটি কী-স্ট্রোকের সাথে আপডেট করার জন্য মডেলটির প্রয়োজন না হয় nameতবে কেবল আবদ্ধ করুন এবং পরে অস্পষ্ট ইভেন্টে অ্যারে আইটেমটি আপডেট করুন:

<div ng-repeat="name in names">
    Value: {{name}}
    <input ng-model="name" ng-blur="names[$index] = name" />
</div>

— বিল হাইটস্তুমান
সূত্র

কেন ব্যবহার হচ্ছে না ng-model="names[$index]"... আমি জানি এটি একটি

— কর্মচক্র

4

আমি সবেমাত্র AngularJs কে 1.1.2 এ আপডেট করেছি এবং এতে কোনও সমস্যা নেই। আমার ধারণা এই বাগটি ঠিক হয়ে গেছে।

http://ci.angularjs.org/job/angular.js-pete/57/artifact/build/angular.js

— আন্তন রডিন
সূত্র

2

সমস্যাটি মনে হয় যেভাবে কীভাবে এটির ng-modelসাথে কাজ করে inputএবং ওভাররাইট করে এটি কীভাবে nameহারিয়ে যায় ng-repeat।

কার্যকারণ হিসাবে, কেউ নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:

<div ng-repeat="name in names">
    Value: {{name}}
    <input ng-model="names[$index]">                         
</div>

আশা করি এটা সাহায্য করবে

— ড্র্যাঙ্কো কোকিয়
সূত্র

1

আমি আমার সমস্যার উপরের সমাধানটি চেষ্টা করেছিলাম এটি একটি কবজির মতো কাজ করেছে। ধন্যবাদ!

http://jsfiddle.net/leighboone/wn9Ym/7/

এটির আমার সংস্করণটি এখানে:

var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
    $scope.models = [{
        name: 'Device1',
        checked: true
    }, {
        name: 'Device1',
        checked: true
    }, {
        name: 'Device1',
        checked: true
    }];

}

এবং আমার এইচটিএমএল

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
         <h1>Fun with Fields and ngModel</h1>
        <p>names: {{models}}</p>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th></th>
                    <th>Feature 1</td>
                    <th>Feature 2</th>
                    <th>Feature 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Device</td>
                   <td ng-repeat="modelCheck in models" class=""> <span>
                                    {{modelCheck.checked}}
                                </span>

                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label">Which devices?</label>
                    </td>
                    <td ng-repeat="model in models">{{model.name}}
                        <input type="checkbox" class="checkbox inline" ng-model="model.checked" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

— লই লাহোঁ
সূত্র

-5

কীভাবে এমন কিছু করুন:

<select ng-model="myModel($index+1)">

এবং আমার পরিদর্শক উপাদান হতে:

<select ng-model="myModel1">
...
<select ng-model="myModel2">

— নিকোলস ওভিডো
সূত্র