以下是我的 PLNKR CODE，它运行良好。
问题 - 我需要为这些元素添加动态范围，以便我可以获取 联系电话 + 类型。
我在提问之前先解决了这个问题，但由于我是 Angular Directive(指令)的新手，我对结果感到困惑，让我知道我还需要添加什么来获取结果。
以下是我期待的结果 -
contact: [
{number: 56432452, type: "Cell"},
{number: 67895644, type: "Work"},
{number: 78943245, type: "Cell"},
{number: 66793456, type: "Home"},
{number: 90546675, type: "Fax"},
];
此外，我需要在 EDIT 模式下使用相同的表单，让我知道在为编辑案例开发此功能时我需要记住哪些额外的事情。
以下是我的指令代码-
<div class="form-group">
<label class="col-sm-2 control-label">Contact Number<span class="asterisk">*</span></label>
<div class="col-sm-5">
<input type="text" class="form-control">
</div>
<div class="col-sm-2">
<select class="btn">
<option>Cell</option>
<option>Work</option>
<option>Home</option>
<option>Fax</option>
</select>
</div>
<div class="col-sm-1">
<img src="http://img.informer.com/icons/png/16/3225/3225535.png" class="remCls">
</div>
</div>
如您所见，目前 select 和 input 不包含 ngModel。让我知道如何引入它以获得上述结果。
最佳答案
我不确定这是你需要的，但我认为你可以将你的 Controller 定义为:
myApp.controller("myCtrl", function($scope){
//Create and array of contacts in your model
$scope.contacts = [];
//Add a new contact to the model
$scope.addContact = function() {
var contacts = $scope.contacts;
contacts[contacts.length] = {};
}
//Remove a contact from the model based on its index
$scope.removeContact = function(index) {
$scope.contacts.splice(index, 1);
}
});
然后在您的 HTML 上，您利用 Angular 指令 ng-repeat 和 ng-click:
<body ng-controller="myCtrl">
<button ng-click="addContact()"> Add Contact </button>
<div class="form-group" ng-repeat="contact in contacts">
<label>Contact Number</label>
<input type="text" ng-model="contact.contact">
<select ng-model="contact.type">
<option>Cell</option>
<option>Work</option>
<option>Home</option>
<option>Fax</option>
</select>
<button ng-click="removeContact($index)"> Remove Contact </button>
</div> <!-- Close Repeater -->
</body>
这是您的 PLNKR 链接，其中包含提议的更改: http://plnkr.co/edit/VWCdXSnOsY18XoCKxO0t?p=preview
关于javascript - 通过angularjs中的指令将动态模型添加到新创建的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25801067/