Festlegen einer Eigenschaft des scope-Objekt dynamisch in Angular Js

Schreibe ich eine generische Methode, um Daten von einem service, und füllen Sie in die dynamische Eigenschaft Namen, die der Funktion übergeben. der Wert wird zugewiesen bekommt, um das Textfeld mit angular.element-Zuweisung, aber nicht aufgefüllt ruft in das Modell. im folgenden ist der code.

<div class="input-group">
<input class="form-control" id="ImgRollover" name="ImgRollover" ng-model="contentEntity.imgRollover" placeholder="" readonly="readonly" type="text">
<div class="input-group-btn">
    <button class="btn" type="button" ng-click="pickImage('contentEntity.imgRollover')">

    </button>
</div>

hier mein controller-Methode, die intern einen Dienst verwendet, welche sendet zurück-ein Versprechen

$scope.pickImage = function (attrModel) {
        ImageSelector.selectImage().then(
            function (value) {
                //angular.element("#" + attrModel).val(value);
                $scope[attrModel] = value;
        });
};

attrModel ist der name einer Eigenschaft in der scope-Objekt contentEntity aber der name der Eigenschaft ist NUR bekannt, dynamisch über die parameter der Methode.

ng_model - ist es Tippfehler? muss ng-model
keine Notwendigkeit, legen Sie den Wert mit val() wenn es gebunden ist, mit ng-model ( mit korrekter syntax)
Wählen Sie ein element durch id 'contentEntity.imgRollover", die nicht existiert
sorry, ng_model war ein Tippfehler. es ist das ng-Modell in den code.
und Ihr problem ist?
wenn Sie die ID ist die gleiche, das Teil funktioniert, aber die eigentliche Herausforderung ist, um den Wert zuzuweisen, um das Modell.
mein problem ist, dass das Modell Wert nicht aufgefüllt bekommt
weil Sie wahrscheinlich übergeben Sie eine Zeichenfolge 'contentEntity.imgRollover'.
versuchen Sie, die einfachen Anführungszeichen.
Sie kann nicht-Objekt-Wert obj['contentEntity.imgRollover'] verwenden Sie obj['contentEntity']['imgRollover'] statt
entfernen von einfachen Anführungszeichen nicht helfen 🙁
haben sollte, es sei denn, contentEntity ist nicht definiert oder imgRollover leer ist. haben Sie versucht, die Protokollierung attrModel.
ja, ich habe versucht zu tun, Protokollierung und er hat Wert
es arbeitet wie das $Bereich['contentEntity']['imgRollover'] = Wert; aber der wichtigste Punkt ist, übergeben Sie diese 2 Teile attrModel, also, wenn ich versuche, wie diese attrModel = ['contentEntity']['imgRollover']; $Bereich[attrModel] = Wert; es funktioniert nicht
so fügen Sie zwei params... pickImage('contentEntity', 'imgRollover')
siehe meine aktualisierte Antwort
haben Sie das schon gemacht und es hat wunderbar funktioniert 🙂 pls posten Sie Ihre Antwort in die Antwort, damit kann ich markieren Sie es als Antwort 🙂
Ihre bereits dort)
Ich schlug vor, etwas anderes, wenn Sie jemals brauchen werden, um die Verwendung einer unknow n Objekt Tiefe
das ist in der Tat sehr viel flexibler. vielen Dank für die Hilfe.

InformationsquelleAutor Vikram | 2014-09-08

<button class="btn" type="button" ng-click="pickImage('contentEntity', 'imgRollover')"></button>

$scope.pickImage = function (attrModel1, attrModel2) {
        ImageSelector.selectImage().then(function (value) {
                $scope.[attrModel1][attrModel2] = value;
        });
};

funktionieren sollte

InformationsquelleAutor Vladimir Gordienko

Ich weiß, das wurde schon gut beantwortet, aber ich wollte eine dynamische Eigenschaft, die Schöpfer.
Es spaltet attrModel durch '.' und dann bearbeitet $scope und ergänzt und/oder gibt jede Eigenschaft, wenn es entweder bereits vorhanden ist oder nicht, wir bewahren die letzten Schlüssel außerhalb der while-Schleife, so dass der Wert einfach angehängt.

$scope.pickImage = function (attrModel) {
        ImageSelector.selectImage().then(
            function (value) {
                var parent = $scope,
                    current,
                    attribute,
                    attributes = attrModel.split('.');

                while(attributes.length > 1 &&
                      (attribute = attributes.shift()) &&
                      (current = parent[attribute] || (parent[attribute] = {}))) {

                    parent = current;
                }
                current[attributes[0]] = value;
        });
};

Natürlich, wenn Sie es tun möchten die kantige Art und Weise, Sie würden einen Dienst zu verwenden, um das zu tun, es könnte so Aussehen

jsfiddle hier

angular.module('myApp').service('ObjectWalker', function () {
        var getNodeData = function (object, path) {
            var parent = object,
                current,
                attribute,
                attributes = path.split('.');

            while(attributes.length > 1 &&
                  (attribute = attributes.shift()) &&
                  (current = parent[attribute] || (parent[attribute] = {}))) {

                parent = current;
            }
            return [current, attributes[0]];
        };

        return {
            set: function(object, path, value) {
                var nodeData = getNodeData(object, path);
                nodeData[0][nodeData[1]] = value;
            },
            get: function(object, path) {
                var nodeData = getNodeData(object, path);
                return nodeData[0][nodeData[1]];
            }
        };
    })

InformationsquelleAutor axelduch

Gibt es schon eine Antwort, aber, wie es die post etwas für die dynamischen Eigenschaften...

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.angularjs.org/1.2.23/angular.js"></script>
    <script type="text/javascript">

      var value = 0;
      function mainCtrl($scope) {

        value++;

        $scope.pickImage = function (attrModel) {
            value++;
            alert(attrModel)
            $scope[attrModel] = value;
        };

        $scope.getValue = function(attrModel) {
          return $scope[attrModel];
        }

      }

    </script>
  </head>

  <body ng-app ng-controller="mainCtrl">

      <input type="text" ng-model="test.obj" />

      <br/>
      <button ng-click="pickImage(test.obj)">test</button>
      <br/>
      display the value afoter button click,
      note there is no single quote
      <br/>
      value: {{ getValue(test.obj) }}


  </body>

</html>

InformationsquelleAutor Noypi Gilas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.