मैं AngularJS में एक गतिशील मॉडल नाम कैसे सेट कर सकता हूं?

Question 1

मैं कुछ गतिशील प्रश्नों के साथ एक फॉर्म को पॉप्युलेट करना चाहता हूं ( यहाँ पर फ़ाइड करें ):

<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}} "]। मैं उस मॉडल का नाम गतिशील रूप से कैसे सेट कर सकता हूं?

Question 2

http://jsfiddle.net/DrQ77/

आप बस जावास्क्रिप्ट अभिव्यक्ति में डाल सकते हैं ng-model।

Question 3

आप कुछ इस तरह का उपयोग कर सकते हैं 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);
        }
    };
}]);

Html उदाहरण:

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

Question 4

मैंने जो किया वह कुछ इस तरह है:

नियंत्रक में:

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>

उम्मीद है की यह मदद करेगा।

Question 5

@Abourget द्वारा उपलब्ध कराए गए उत्तर को और अधिक पूर्ण बनाने के लिए, कोड की निम्नलिखित पंक्ति में दायरे [क्षेत्र] के मान को अपरिभाषित किया जा सकता है। यह सबफ़ील्ड सेट करते समय त्रुटि के कारण होगा:

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

इस समस्या को हल करने का एक तरीका विशेषता एनजी-फोकस = "nullSafe (फ़ील्ड)" जोड़कर है, इसलिए आपका कोड नीचे की तरह दिखाई देगा:

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

फिर आप नीचे दिए गए नियंत्रक की तरह nullSafe (फ़ील्ड) को परिभाषित करते हैं:

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

यह गारंटी देता है कि गुंजाइश [क्षेत्र] [क्षेत्र] [क्षेत्र] के लिए कोई भी मूल्य निर्धारित करने से पहले गुंजाइश [क्षेत्र] अपरिभाषित नहीं है।

नोट: आप उसी परिणाम को प्राप्त करने के लिए ng-change = "nullSafe (फ़ील्ड)" का उपयोग नहीं कर सकते क्योंकि ng-model के बदल जाने के बाद ng-change होता है, जो एक गलती को फेंक देता है यदि गुंजाइश [क्षेत्र] अपरिभाषित हो।

Question 6

या आप उपयोग कर सकते हैं

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