從子對象填充表單

我試圖尋找解決方案，但無法找到確切的解決方案。從子對象填充表單

這是場景。

我有一個對象列表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>

來源

2014-11-25 Nilesh

我看看你的plunker，這是差不多吧。您試圖綁定到Notes模型上不存在的屬性。如果你想選擇一個默認值添加到模型

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

<head> 
    <link rel="stylesheet" href="style.css"> 
    <script data-require="[email protected]*" 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>

來源

2014-11-25 08:19:19

感謝您指出的問題。我真的是這個角色的新手。你能告訴我如何獲得默認的選擇值？假設我有一個名爲Default的屬性。這對一個人來說是真的，對另一個人來說是虛假的我將如何設置默認選定值？現在我很困惑哪一個我應該標記爲答案導致這兩個答案工作:( – Nilesh 2014-11-25 08:41:12

@Nilesh我已經更新了答案，包括默認選擇。關於你的問題...我會說更舊的答案:) – 2014-11-25 08:55:57

年紀較大的會是@huan :)。我想要的是，選擇基於我將從服務器發送的布爾屬性的默認值。我將如何實現這一目標？例如：如果我在一個子對象中有一個IsSelected，我想要選擇這個特定的值。 – Nilesh 2014-11-25 09:06:06

這是幫助嗎？

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>

來源

2014-11-25 08:26:05

這很有幫助。如果我提交表單，值會再次綁定到我要發送給服務器的模型上？ – Nilesh 2014-11-25 08:37:40

從子對象填充表單

回答

相關問題