CODEWITHSUNDEEP
javascriptangularjsjson
bagya
bagya

Reputation: 399

angular two way binding with JSON?

Actually i have one JSON in scope. I need to change that JSON values whenever the ng-model will get change. In the below example JSON having rowset with attributes (CuId,Name,Quantity,Rate,Amount). These attribute names i have to bind the with control(textbox) like ng-model=CuId. So whenever the corresponding attributes value will get change the JSON need to be update.

Please provide any example related to this or suggest me how to achieve this.

JSON:

 $scope.postJSON =   {
      "entityInfo": {
        "entity": "",
        "tenantId": "",
        "timeStamp": "2016-04-07T09:37:16.187Z"
      },
      "collections": {
        "Customer29Jan16": {
          "meta": {
            "parentreference": "***",
            "pkname": "***",
            "fkname": "***"
          },
          "rowset": [
            {
              "CuId": "test",
              "Name": "test",
              "Quantity": "test",
              "Rate": "test",
              "Amount": "test"
            }
          ],
          "rowfilter": []
        }
      }
    }

Upvotes: 1

Views: 1554

Answers (4)

fikkatra
fikkatra

Reputation: 5792

<input ng-model="postJSON.collections.Customer29Jan16.rowset[0].CuId" />

or, to make things more compact, put the rowset on the scope:

$scope.rowset = $scope.postJSON.collections.Customer29Jan16.rowset[0];

then use:

<input ng-model="rowset.CuId" />

Upvotes: 2

senschen
senschen

Reputation: 804

As the other answers have mentioned, you need to use the entire tree down to the property you want to change. However, they didn't mention that since rowset is an array, you also have to specify which element of rowset you want to access. Use something like ng-model="postJSON.collections.Customer29Jan16.rowset[0].CuId".

Upvotes: 4

Alex Logan
Alex Logan

Reputation: 1241

You've added postData to the scope so you can bind onto individual attributes like so. 

<input ng-model="postJSON.collections.Customer29Jan16.rowset[0].CuId" />
<input ng-model="postJSON.collections.Customer29Jan16.rowset[0].Name" />
<input ng-model="postJSON.collections.Customer29Jan16.rowset[0].Quantity" />
<input ng-model="postJSON.collections.Customer29Jan16.rowset[0].Rate" />
<input ng-model="postJSON.collections.Customer29Jan16.rowset[0].Amount" />

Upvotes: 1

nathan felix
nathan felix

Reputation: 396

You have to put the whole tree in the ng-model. Like this:

<input type="text" ng-model="postJSON.collections.Customer29Jan16.rowset.CuId" />

Upvotes: 2

Related Questions