Question

我尝试在此搜索解决方案，但无法找到确切的解决方案。

以下是该方案。

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

Answer 1

我看了看你的傻瓜，几乎是对的。您试图绑定到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>

Answer 2

这有帮助吗？

plnkr

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

从子对象填充表单

2 个答案: