gpt4 book ai didi

javascript - 从子对象填充表单

转载 作者:行者123 更新时间:2023-12-02 16:45:51 26 4
gpt4 key购买 nike

我尝试寻找解决方案,但未能找到确切的解决方案。

这是场景。

我有一个对象列表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>

最佳答案

我看了你的笨蛋,几乎是对的。您试图绑定(bind)到 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];
});

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

将 script.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>

关于javascript - 从子对象填充表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27121243/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com