AngularJS: मॉडल सरणी से मॉडल तत्व को विभाजित करने पर ng-repeat सूची अद्यतन नहीं होती है


Answers

यदि आप $scope.$apply(); जोड़ते हैं $scope.$apply(); $scope.pluginsDisplayed.splice(index,1); ठीक बाद $scope.pluginsDisplayed.splice(index,1); तो यह काम करता है।

मुझे यकीन नहीं है कि यह क्यों हो रहा है, लेकिन मूल रूप से जब AngularJS को पता नहीं है कि $ गुंजाइश बदल गई है, तो उसे मैन्युअल रूप से $ लागू करने की आवश्यकता है। मैं AngularJS के लिए भी नया हूं इसलिए इसे बेहतर समझा नहीं सकता। मुझे इसमें और भी देखना चाहिए।

मुझे यह शानदार लेख मिला जो इसे काफी सही तरीके से समझाता है। नोट: मुझे लगता है कि "mousedown" को बाध्य करने के बजाय एनजी-क्लिक (docs) का उपयोग करना बेहतर हो सकता है। मैंने AngularJS पर आधारित एक सरल ऐप लिखा है ( http://avinash.me/losh , स्रोत http://github.com/hardfire/losh )। यह बहुत साफ नहीं है, लेकिन यह मदद की हो सकती है।

Question

मेरे पास दो नियंत्रक हैं और उनके बीच एक ऐप। फैक्टरी फ़ंक्शन के साथ डेटा साझा करते हैं।

जब कोई लिंक क्लिक किया जाता है तो पहला नियंत्रक मॉडल सरणी (प्लगइन्स डिस्प्लेड) में एक विजेट जोड़ता है। विजेट को सरणी में धक्का दिया जाता है और यह परिवर्तन दृश्य में दिखाई देता है (जो सरणी सामग्री दिखाने के लिए ng-repeat का उपयोग करता है):

<div ng-repeat="pluginD in pluginsDisplayed">
    <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>

विजेट तीन निर्देशों, k2plugin, हटाने और आकार बदलने पर बनाया गया है। निकालने का निर्देश k2plugin निर्देश के टेम्पलेट में एक अवधि जोड़ता है। जब कहा गया कि स्पैन क्लिक किया गया है, साझा सरणी में सही तत्व Array.splice() साथ हटा दिया गया है। साझा सरणी सही ढंग से अपडेट की गई है, लेकिन परिवर्तन दृश्य में दिखाई नहीं देता है। हालांकि, जब निकालने के बाद, कोई अन्य तत्व जोड़ा जाता है, तो दृश्य सही ढंग से रीफ्रेश किया जाता है और पहले से हटाए गए तत्व को नहीं दिखाया जाता है।

मुझे क्या गलत हो रहा है? क्या आप मुझे समझा सकते हैं कि यह क्यों काम नहीं करता है? क्या एंगुलरजेएस के साथ क्या करने की कोशिश कर रहा हूं, ऐसा करने का एक बेहतर तरीका है?

यह मेरा index.html है:

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">
        </script>
        <script src="main.js"></script>
    </head>
    <body>
        <div ng-app="livePlugins">
            <div ng-controller="pluginlistctrl">
                <span>Add one of {{pluginList.length}} plugins</span>
                <li ng-repeat="plugin in pluginList">
                    <span><a href="" ng-click="add()">{{plugin.name}}</a></span>
                </li>
            </div>
            <div ng-controller="k2ctrl">
                <div ng-repeat="pluginD in pluginsDisplayed">
                    <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
                </div>
            </div>
        </div>
    </body>
</html>

यह मेरा मुख्य है। जेएस:

var app = angular.module ("livePlugins",[]);

app.factory('Data', function () {
    return {pluginsDisplayed: []};
});

app.controller ("pluginlistctrl", function ($scope, Data) {
    $scope.pluginList = [{name: "plugin1"}, {name:"plugin2"}, {name:"plugin3"}];
    $scope.add = function () {
        console.log ("Called add on", this.plugin.name, this.pluginList);
        var newPlugin = {};
        newPlugin.id = this.plugin.name + '_'  + (new Date()).getTime();
        newPlugin.name = this.plugin.name;
        Data.pluginsDisplayed.push (newPlugin);
    }
})

app.controller ("k2ctrl", function ($scope, Data) {
    $scope.pluginsDisplayed = Data.pluginsDisplayed;

    $scope.remove = function (element) {
        console.log ("Called remove on ", this.pluginid, element);

        var len = $scope.pluginsDisplayed.length;
        var index = -1;

        // Find the element in the array
        for (var i = 0; i < len; i += 1) {
            if ($scope.pluginsDisplayed[i].id === this.pluginid) {
                index = i;
                break;
            }
        }

        // Remove the element
        if (index !== -1) {
            console.log ("removing the element from the array, index: ", index);
            $scope.pluginsDisplayed.splice(index,1);
        }

    }
    $scope.resize = function () {
        console.log ("Called resize on ", this.pluginid);
    }
})

app.directive("k2plugin", function () {
    return {
        restrict: "A",
        scope: true,
        link: function (scope, elements, attrs) {
            console.log ("creating plugin");

            // This won't work immediately. Attribute pluginname will be undefined
            // as soon as this is called.
            scope.pluginname = "Loading...";
            scope.pluginid = attrs.pluginid;

            // Observe changes to interpolated attribute
            attrs.$observe('pluginname', function(value) {
                console.log('pluginname has changed value to ' + value);
                scope.pluginname = attrs.pluginname;
            });

            // Observe changes to interpolated attribute
            attrs.$observe('pluginid', function(value) {
                console.log('pluginid has changed value to ' + value);
                scope.pluginid = attrs.pluginid;
            });
        },
        template: "<div>{{pluginname}} <span resize>_</span> <span remove>X</span>" +
                       "<div>Plugin DIV</div>" +
                  "</div>",
        replace: true
    };
});

app.directive("remove", function () {
    return function (scope, element, attrs) {
        element.bind ("mousedown", function () {
            scope.remove(element);
        })
    };

});

app.directive("resize", function () {
    return function (scope, element, attrs) {
        element.bind ("mousedown", function () {
            scope.resize(element);
        })
    };
});



ऐसा करने का एक आसान तरीका है। बहुत आसान। चूंकि मैंने देखा है

$scope.yourModel = [];

सभी $ scope.yourModel सरणी सूची को हटा देता है जो आप इस तरह कर सकते हैं

function deleteAnObjectByKey(objects, key) {
    var clonedObjects = Object.assign({}, objects);

     for (var x in clonedObjects)
        if (clonedObjects.hasOwnProperty(x))
             if (clonedObjects[x].id == key)
                 delete clonedObjects[x];

    $scope.yourModel = clonedObjects;
}

$ Scope.yourModel क्लोन ऑब्जेक्ट्स के साथ अपडेट किया जाएगा।

उम्मीद है की वो मदद करदे।




Links