गतिशील रूप से एनजी-मॉडल असाइन करें

Question 1

मैं ऑब्जेक्ट सरणी से चेक-बॉक्स का एक सेट जनरेट करने की कोशिश कर रहा हूं। मैं लक्ष्य-बक्से को गतिशील रूप से उनके एनजी-मॉडल को नए ऑब्जेक्ट की एक संपत्ति में मैप करने का लक्ष्य बना रहा हूं जो कि सरणी में प्रस्तुत किया जाएगा।

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

<li ng-repeat="item in items">
    <label>{{item.name}}</label>
    <input type="checkbox" ng-model="newObject.{{item.name}}">
</li>

यह इस JSFiddle पर देखा जा सकता है के रूप में काम नहीं करता है:

http://jsfiddle.net/GreenGeorge/NKjXB/2/

क्या कोई मदद कर सकता है?

Question 2

यह आपको वांछित परिणाम देना चाहिए:

<input type="checkbox" ng-model="newObject[item.name]">

यहाँ एक काम कर रहा है: http://plnkr.co/edit/ALHQtkjiUDzZVtTfLIOR?p=preview

Question 3

संपादित करें जैसा कि एनजी-परिवर्तन के साथ इसका उपयोग करते हुए टिप्पणियों में सही ढंग से उल्लेख किया गया है, पहले से मौजूद होने के लिए "डमी" एनजी-मॉडल की आवश्यकता है। हालांकि यह ध्यान दिया जाना चाहिए कि जाहिरा तौर पर 1.3 के साथ रूपरेखा द्वारा आवश्यक विकल्प प्रदान किए गए हैं। कृपया नीचे देखें https://stackoverflow.com/a/28365515/3497830 ! / संपादित करें

बस अगर आप मेरे जैसे हैं तो एक साधारण मामले पर अधिक जटिल काम करते हुए लड़खड़ा जाते हैं, यह वह समाधान है जो मैं एनजी-मॉडल के लिए गतिशील रूप से मनमाने ढंग से बंधने के लिए आया हूं: http://plnkr.co/edit/ccdJTmT.zBnqjntEQfAfx?p?p = पूर्वावलोकन

विधि: मैंने एक डाइनेमिक डायनामोडेल बनाया है जो एक मानक कोणीय अभिव्यक्ति लेता है, इसका मूल्यांकन करता है और परिणाम को एनजी-मॉडल और $ संकलन के माध्यम से दायरे से जोड़ता है।

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = {};
  $scope.testvalue = 'data.foo';
  $scope.eval = $scope.$eval;
});

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = {};
  $scope.testvalue = 'data.foo';
  $scope.eval = $scope.$eval;
});

app.directive('dynamicModel', ['$compile', function ($compile) {
    return {
        'link': function(scope, element, attrs) {
            scope.$watch(attrs.dynamicModel, function(dynamicModel) {
                if (attrs.ngModel == dynamicModel || !dynamicModel) return;

                element.attr('ng-model', dynamicModel);
                if (dynamicModel == '') {
                    element.removeAttr('ng-model');
                }

                // Unbind all previous event handlers, this is 
                // necessary to remove previously linked models.
                element.unbind();
                $compile(element)(scope);
            });
        }
    };
}]);

उपयोग केवल डायनेमिक-मॉडल = "कोणीय एक्सप्रेशन" है जहां कोणीय एक्सप्रेशन एक स्ट्रिंग में परिणाम देता है जो एनजी-मॉडल के लिए अभिव्यक्ति के रूप में उपयोग किया जाता है।

मुझे आशा है कि यह किसी को इस समाधान के साथ आने के सिरदर्द को बचाता है।

सादर, जस्टस

Question 4

कोणीय 1.3 के साथ, आप ng-model-optionsमॉडल को गतिशील रूप से असाइन करने के लिए निर्देश का उपयोग कर सकते हैं , या अभिव्यक्ति के लिए बाध्य कर सकते हैं ।

यहाँ एक प्लंकर है: http://plnkr.co/edit/65EBiySUc1iWCWG6Ov98?p=preview

<input type="text" ng-model="name"><br>
<input type="text" ng-model="user.name" 
ng-model-options="{ getterSetter: true }">

ngModelOptionsयहाँ पर अधिक जानकारी : https://docs.angularjs.org/api/ng/directive/ngModelOptions

Question 5

यह गहरी अभिव्यक्ति का समर्थन करने के लिए मेरा दृष्टिकोण है, उदाहरण के लिए 'model.level1.level2.value'

<input class="form-control" ng-model="Utility.safePath(model, item.modelPath).value">

जहां item.modelPath = 'level1.level2' और उपयोगिता (मॉडल, 'level1.level2') उपयोगिता फ़ंक्शन है जो model.level1.level2 लौटाता है

Question 6

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

    <div ng-app="myApp" ng-controller="myCtrl">
        <form name="priceForm" ng-submit="submitPriceForm()">
            <div ng-repeat="x in [].constructor(9) track by $index">
                <label>
                    Person {{$index+1}} <span class="warning-text">*</span>
                </label>
                <input type="number" class="form-control" name="person{{$index+1}}" ng-model="price['person'+($index+1)]" />

            </div>
            <button>Save</button>
        </form>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.price = [];
            $scope.submitPriceForm = function () {
                //objects be like $scope.price=[{person1:value},{person2:value}....]
                console.log($scope.price);
            }
        });
    </script>
</body>
</html>

स्निपेट का विस्तार करें