从子对象填充表单

Populate form from child object

本文关键字：表单 填充 对象      更新时间：2023-09-26

我尝试寻找解决方案，但找不到确切的解决方案。

这是场景。

我有一个对象列表ctrl.Parents父对象包含一个子对象列表，就像我们有一个 poco 实体一样。

我想要的是，从子对象填充一个选择下拉列表。这是一个不完整的 plunker，以下是可以给你一个想法的代码。

// Code goes here
var app = angular.module("testApp", []);
app.controller("testCtrl", function($scope) {
  $scope.Parents = [{
    "Id": 1,
    "Name": "First Note",
    "TypeName": "First Type",
    "Notes": [{
      "Id": 1,
      "ParentID": 1,
      "Draft": "Draft 1",
      "Note": "First Draft"
    }, {
      "Id": 2,
      "ParentID": 1,
      "Draft": "Draft 2",
      "Note": "Second Draft"
    }]
  }, {
    "Id": 2,
    "Name": "Second Note",
    "TypeName": "Second Type",
    "Notes": [{
      "Id": 3,
      "ParentID": 2,
      "Draft": "Draft 1",
      "Note": "First Draft"
    }, {
      "Id": 4,
      "ParentID": 2,
      "Draft": "Draft 4",
      "Note": "Second Draft"
    }]
  }]
});
<!DOCTYPE html>
<html ng-app="testApp">
<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
  <select ng-model="parent.name" ng-options="p.Name for p in Parents">
  </select>
  <br/>
  <b><span>Following list should be populated with Parent.Notes.Name
  as show in the <br/>
    EX: If Parent drop down has value First Note then following list will show</span></b>
  <br/>
  <select>
    <option selected="selected" value="Draft 1">Draft 1</option>
    <option value="Draft 2">Draft 2</option>
  </select>
  <br/>
  <span>And text will be as follows</span>
  <br/>
  <textarea>First Draft</textarea>
</body>
</html>

我看了看你的 plunker，这几乎是对的。您正在尝试绑定到 Notes 模型上不存在的属性。试试这个：

<!DOCTYPE html>
<html ng-app="testApp">
<head>
  <link rel="stylesheet" href="style.css">
  <script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
  <select ng-model="parent" ng-options="p.Name for p in Parents">
  </select>
  <select ng-options="n.Note for n in parent.Notes" ng-model="Notes">
  </select>
</body>
</html>

如果要选择默认值，请将其添加到模型中：

...//the end of your model
 }, {
      "Id": 4,
      "ParentID": 2,
      "Note": "Second Draft"
    }]
  }]
    $scope.parent = $scope.Parents[0];
});

为了根据属性的值选择默认子项，您必须相应地更新代码：

将脚本.js更改为：

// Code goes here
var app = angular.module("testApp", []);
app.controller("testCtrl", function($scope) {
  $scope.Parents = [{
    "Id": 1,
    "Name": "First Note",
    "TypeName": "First Type",
    "Notes": [{
      "Id": 1,
      "ParentID": 1,
      "Note": "First Draft",
      "Def" : true
    }, {
      "Id": 2,
      "ParentID": 1,
      "Note": "Second Draft",
      "Def" : false
    }]
  }, {
    "Id": 2,
    "Name": "Second Note",
    "TypeName": "Second Type",
    "Notes" : [{
      "Id": 3,
      "ParentID": 2,
      "Note": "First Draft",
      "Def" : false
    }, {
      "Id": 4,
      "ParentID": 2,
      "Note": "Second Draft",
      "Def" : true
    }]
  }];
  $scope.update = function() {
   $scope.Notes = $scope.findNote($scope.parent.Notes);
  }
   $scope.findNote = function (notes) {
        for (var i = 0; i < notes.length; i++) {
            if (notes[i].Def == true) {
                return notes[i];
            }
        }
      }
});

并更新您的 HTML：

<body ng-controller="testCtrl">
  <select ng-model="parent" ng-options="p.Name for p in Parents" ng-change="update()">
  </select>
  <select ng-options="n.Note for n in parent.Notes" ng-model="Notes" >
  </select>
</body>

这是有帮助吗？

普罗提

<body ng-controller="testCtrl">
  <select ng-model="p" ng-options="p.Name for p in Parents">

  </select>

  <select ng-model="note.SelectedID" ng-options="note.Id for note in p.Notes">
  </select>
</body>
相关文章：