ng-model accesses nested objects

advertisements

I have a grid on my page, by click on row in this grid, User can see the form for editing values of this row. The problem is that I'm using ng-repeat that to show data and nested values displayed as [Object object]. How to get an access to this values? I've tried something like rowData[k].name but it returns only second part of form, the first part is empty. Where is my mistake? Plunker

Code:

$scope.load = function(){

  $http({
       method: "GET",
       url: 'test.json'
       })
       .then(function success(response) {
              $scope.rowData = response.data;
                  console.log($scope.rowData)
       }, function error(response) {
                 console.log("It has happend error in response")
  }).then(function(){
      $scope.id = $scope.rowData.id;
            console.log($scope.id);
           $scope.rowKeys = Object.keys($scope.rowData);
  })
  }

html:

<form style="padding: 15px" ng-submit="submitForm()" >
         <div class="form-group row">
          <div ng-repeat="k in rowKeys | filter: '!0' | filter: '!$$'" ng-model="rowVal" >
            <div ng-if="(k === 'id' || k.toLowerCase().endsWith('id') === false) ? true : false">
             <label for="rowValue" class="col-sm-2">
                {{k | hide:'.name' | makeUppercase }}:
            </label>
         <div class=" col-sm-2" >
              <input class="form-control rowValue" id="rowValue"
                       ng-model="rowData[k]"/>
        </div>
       </div>
      </div>
     </div>
<button type="submit" class="btn btn-default" ng-if="rowData">Save</button>
<button type="button" class="btn btn-default" ng-if="rowData" ng-click="cancelForm()">Cancel</button>
    </form>


Considering your plunker/example, you are showing three types: object, string and number. You can use the angular.isObject(value) method to check if a value is object or not. If it's an object, you can use the dot notation. Otherwise just show the value.

<input ng-if="!isObject(rowData[k])" class="form-control rowValue" id="rowValue"
       ng-model="rowData[k]"/>

<input ng-if="isObject(rowData[k])" class="form-control rowValue" id="rowValue"
       ng-model="rowData[k].name"/>

$scope.isObject = function(value) {
    if(angular.isObject(value)) {
      return true;
    } else {
      return false;
    }
}

See this Plunker.