ng-model получить доступ к вложенным объектам

У меня есть сетка на моей странице, щелкнув по строке в этой сетке, Пользователь может видеть форму для редактирования значений этой строки. Проблема в том, что я использую ng-repeat, чтобы отображать данные и вложенные значения, отображаемые как [Объект объекта]. Как получить доступ к этим значениям? Я пробовал что-то вроде rowData[k].name, но он возвращает только вторую часть формы, первая часть пуста. Где моя ошибка? Plunkerng-model получить доступ к вложенным объектам

Код:

$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>

источник

2016-06-01 Anton

Учитывая ваш плункер/пример, вы показываете три типа: объект, строку и номер. Вы можете использовать метод angular.isObject(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; 
    } 
}

Смотрите эту Plunker.

источник

2016-06-01 18:29:02 Saad

Да, он работает и не возвращает никаких ошибок в консоли, но как насчет Anton

Не получил ваш вопрос полностью. На 2 идентификатора, если вы имели в виду два идентификатора ввода для одного и того же 'label', тогда ответ будет только одним из элементов ввода, который будет создан в DOM, а другой будет удален из DOM. Таким образом, для метки есть только один идентификатор (поле ввода). – Saad

Я обновил плункер с некоторыми другими модификациями. Я сделал значение «label for», чтобы указать на id окна ввода, удалил 'ng-model' из div' ng-repeat'. Если вы нажмете на метку, курсор теперь укажет на поле ввода. И нет смысла ставить 'ng-model' в div, поэтому удалил его. – Saad

Я думаю rowData[k].name является то, что вы ищете.

источник

2016-06-01 18:02:44

теперь он отображающий только вторую часть формы. Как я могу заставить его отображать каждое значение? – Anton

Используйте два 'input' с разными привязками ('rowData [k] .name' и' rowData [k] ') условно (' ng-if'). Самый безопасный способ - иметь состояние по имени свойства. –

При работе с объектами у вас есть два способа доступа к свойствам, которые являются Bracket Notation and Dot Notation. Dot Notation - наиболее распространенный способ доступа к свойствам объекта.

var myObject = { 
    name: 'Anton' 
}; 

//Bracket Notation 
console.log(myObject['name']); 

//Dot Notation 
console.log(myObject.name);

источник

2016-06-01 18:10:32 Gregg

он не решает мою проблему, мне нужно отобразить оба способа получения данных как 'rowData [k]' и this 'rowData [k] .name'. В настоящее время я могу показать только один из этих способов. – Anton

Даже если это не поможет решить вашу проблему, вам будет полезно изучить синтаксис. – Gregg

Я абсолютно согласен с тобой – Anton

Что-то вроде этого может сработать для вас.

https://plnkr.co/edit/p5ghWAdIxXCQHYPhjzFU?p=preview

<!DOCTYPE html> 
<html ng-app="app"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
    <script data-require="[email protected]*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <p>Hello {{name}}!</p> 
    <button class="btn btn-success" ng-click="load()">Push me</button> 
     <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].name === undefined)? rowData[k] : rowData[k].name"/> 
     </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> 
    </body> 

</html>

источник

2016-06-01 18:29:09 NTL

Да, это показывает данные, но консольный журнал возвращает '[ngModel: nonassign] Expression '(rowData [k] .name === undefined)? rowData [k]: rowData [k] .name 'не назначается. ' – Anton

Вы можете попробовать следующий

<div class=" col-sm-2" > 
      <input class="form-control rowValue" 
         ng-model="rowData[k].name || rowData[k]" /> 
     </div>

источник

2016-06-01 18:32:43 Ananthaprakash

Мне нравится ваш метод, я пробовал rowData [k] .name && rowData [k], потому что мы должны отображать rowData [k] .name и rowData [k] вызывают оба значения, это правда, но я даже не думал об этом операторе «II». – Anton

&& оператор не помогает. Вы пробовали это? Он ничего не отобразит. Я пытаюсь использовать оператор литья для отображения содержимого. Когда он не смог найти объект с именем name, он отобразил исходное свойство. Вот где || оператор помогает. Если вы используете && operator, это вернет false во всех случаях. Не так ли? – Ananthaprakash

Я не закончил свое предложение, я попробовал && operator, но это не помогло мне и каждый раз возвращает false, вы абсолютно правы! благодаря! – Anton

ng-model получить доступ к вложенным объектам

ответ

Смежные вопросы