আমি AngularJS এ কীভাবে একটি গতিশীল মডেল নাম সেট করতে পারি?

Question

আমি কিছু গতিশীল প্রশ্ন (একটি ফিডল এখানে ) দিয়ে একটি ফর্ম তৈরি করতে চাই :

<div ng-app ng-controller="QuestionController">
    <ul ng-repeat="question in Questions">
        <li>
            <div>{{question.Text}}</div>
            <select ng-model="Answers['{{question.Name}}']" ng-options="option for option in question.Options">
            </select>
        </li>
    </ul>

    <a ng-click="ShowAnswers()">Submit</a>
</div>
​
function QuestionController($scope) {
    $scope.Answers = {};

    $scope.Questions = [
    {
        "Text": "Gender?",
        "Name": "GenderQuestion",
        "Options": ["Male", "Female"]},
    {
        "Text": "Favorite color?",
        "Name": "ColorQuestion",
        "Options": ["Red", "Blue", "Green"]}
    ];

    $scope.ShowAnswers = function()
    {
        alert($scope.Answers["GenderQuestion"]);
        alert($scope.Answers["{{question.Name}}"]);
    };
}​

মডেল ব্যতীত সমস্ত কিছুই কার্যকর হয় উত্তরগুলি ["{{question.Name}}"] এর পরিবর্তে মূল্যায়িত উত্তরগুলির পরিবর্তে ["জেন্ডারকিউশন"]। কীভাবে আমি সেই মডেলের নামটি গতিশীলভাবে সেট করতে পারি?

Answer 1

http://jsfiddle.net/DrQ77/

আপনি কেবল জাভাস্ক্রিপ্ট এক্সপ্রেশন ভিতরে রাখতে পারেন ng-model।

Comments

আমি দিব্যি আমি চেষ্টা করেছিলাম। আপনাকে অনেক ধন্যবাদ. আমি প্রকৃতপক্ষে অন্য একটি রুটে চলেছি, এবং কেবল মডেলটিকে প্রশ্ন করার জন্য প্রস্তুত করেছি ns উত্তর (আমি একটি হালকা হালকা ফিডাল কিছুক্ষণের মধ্যে রেখে দেব), যা আরও সরাসরি উত্তর হয়ে উঠল (জিকুয়ের মানসিকতা থেকে বেরিয়ে আসতে হবে), তবে এটা জেনে রাখা দুর্দান্ত যে আমি ভবিষ্যতের জন্য মূলত যেভাবে পরিকল্পনা করেছিলাম, সত্যিই এটি করতে পারি। আবার ধন্যবাদ!

— মাইক প্যাটেরাস

যদি এটি অন্য কাউকে সহায়তা করে তবে আমারও একই রকম সমস্যা ছিল, তবে আমার সমস্যাটি হ'ল আমি ng-pattern="field.pattern"যখন যা চাইছিলাম তা আসলে ব্যবহার করি pattern="{{field.pattern}}"। এই ধরণের বিভ্রান্তিমূলক যে কৌণিক সাধারণত গতিশীল বৈশিষ্ট্যের জন্য একটি সহায়ক সরবরাহ করে তবে এবার এটি নিজের ক্লায়েন্ট-পার্শ্বের বৈধতা লিখেছিল এবং এটি একই নাম দিয়েছে।

— কল্লিন

আপনি যখন এটির কোনও আসল উদ্দেশ্য না রেখে কেন একটি খালি বস্তু (উত্তর) তৈরি করার সিদ্ধান্ত নিয়েছিলেন? আপনি কেবল এনজি-মডেলটিতে এটি ব্যবহার করছেন বলে মনে হয় এবং এগুলি ছাড়াও এর কোনও উদ্দেশ্য বলে মনে হয় না o সুতরাং কেন এটি একেবারে বাদ দিয়ে এটিকে সেভাবে কাজ করাতে হবে না? তুমি কি পরিষ্কার করে বলতে পারো?

— দেবনার

আমি কেবল আসল কোড থেকে ন্যূনতম পরিবর্তন করার চেষ্টা করেছি। আপনি যদি মাইকের সংশোধিত কোড ( jsfiddle.net/2AWLM/23 ) দেখুন তবে তিনি এ থেকে মুক্তি পাওয়ার সিদ্ধান্ত নিয়েছেন।

— তোশ

এই জন্য আপনাকে অনেক ধন্যবাদ. আমাকে অনেক সাহায্য করেছে। এখানে দেখুন: স্ট্যাকওভারফ্লো.com

— অ্যালবার্ট

Answer 2

আপনি এর মতো কিছু ব্যবহার করতে পারেন scopeValue[field]তবে যদি আপনার ক্ষেত্র অন্য কোনও অবজেক্টে থাকে তবে আপনার আর একটি সমাধান প্রয়োজন।

সকল ধরণের পরিস্থিতি সমাধানের জন্য, আপনি এই নির্দেশটি ব্যবহার করতে পারেন:

this.app.directive('dynamicModel', ['$compile', '$parse', function ($compile, $parse) {
    return {
        restrict: 'A',
        terminal: true,
        priority: 100000,
        link: function (scope, elem) {
            var name = $parse(elem.attr('dynamic-model'))(scope);
            elem.removeAttr('dynamic-model');
            elem.attr('ng-model', name);
            $compile(elem)(scope);
        }
    };
}]);

এইচটিএমএল উদাহরণ:

<input dynamic-model="'scopeValue.' + field" type="text">

Comments

প্রত্যাশার মতো কাজ করে।

— C0ZEN

হ্যাঁ! এটাই আমার দরকার! ধন্যবাদ!

— স্নেপম্যান

ভাল লাগল তবে তবুও আশা করি আমরা কেবল ব্যবহার করতে পারি ng-model="{{ variable }}":)

— ডেভিডকনরাদ

Answer 3

আমি যা করে শেষ করেছি তা হ'ল:

নিয়ামকটিতে:

link: function($scope, $element, $attr) {
  $scope.scope = $scope;  // or $scope.$parent, as needed
  $scope.field = $attr.field = '_suffix';
  $scope.subfield = $attr.sub_node;
  ...

সুতরাং টেমপ্লেটগুলিতে আমি সম্পূর্ণ গতিশীল নামগুলি ব্যবহার করতে পারি, এবং কেবলমাত্র একটি নির্দিষ্ট হার্ড-কোডেড উপাদানের অধীনে নয় (যেমন আপনার "উত্তরগুলি" হিসাবে):

<textarea ng-model="scope[field][subfield]"></textarea>

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

Answer 4

@ বাবার্গেটের দেওয়া উত্তরটি আরও সম্পূর্ণ করতে, নিম্নলিখিত কোডের লাইনটিতে স্কোপভ্যালু [ক্ষেত্র] এর মান নির্ধারিত হতে পারে। সাবফিল্ড সেট করার সময় এটির একটি ত্রুটি ঘটবে:

<textarea ng-model="scopeValue[field][subfield]"></textarea>

এই সমস্যাটি সমাধানের একটি উপায় হ'ল এনজি-ফোকাস = "নালস্যাফ (ক্ষেত্র)" এ্যাট্রিবিউট যুক্ত করা, যাতে আপনার কোডটি নীচের মত দেখাবে:

<textarea ng-focus="nullSafe(field)" ng-model="scopeValue[field][subfield]"></textarea>

তারপরে আপনি নীলের মতো একটি নিয়ামকটিতে নালসেফ (ক্ষেত্র) সংজ্ঞায়িত করুন:

$scope.nullSafe = function ( field ) {
  if ( !$scope.scopeValue[field] ) {
    $scope.scopeValue[field] = {};
  }
};

এটি গ্যারান্টি দিবে যে স্কোপভ্যালু [ক্ষেত্র] [সাবফিল্ড] এ কোনও মান নির্ধারণের আগে স্কোপভ্যালু [ক্ষেত্র] অপরিজ্ঞাত নয়।

দ্রষ্টব্য: আপনি একই ফল অর্জনের জন্য এনজি-চেঞ্জ = "নালস্যাফ (ফিল্ড)" ব্যবহার করতে পারবেন না কারণ এনজি-পরিবর্তনটি এনজি-মডেল পরিবর্তনের পরে ঘটে যা স্কোপভ্যালু [ক্ষেত্র] অপরিজ্ঞাত থাকলে একটি ত্রুটি ঘটায়।

Answer 5

অথবা আপনি ব্যবহার করতে পারেন

<select [(ngModel)]="Answers[''+question.Name+'']" ng-options="option for option in question.Options">
        </select>