Question

以下是我的PLNKR CODE工作正常。

问题 - 我需要为这些元素添加动态范围，以便我可以抓取contact number + type。

我问google之前的问题，但由于我对角度指令不熟悉，我对结果感到困惑，让我知道还需要添加什么来获取结果。

我希望得到一些结果 -

contact: [
    {number: 56432452, type: "Cell"},
    {number: 67895644, type: "Work"},
    {number: 78943245, type: "Cell"},
    {number: 66793456, type: "Home"},
    {number: 90546675, type: "Fax"},
];

另外，我需要在 EDIT 模式下使用相同的表单，让我知道在为编辑案例开发此功能时需要记住的额外内容。

以下是我的directive代码 -

<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。让我知道如何引入这个来获得上述结果。

Answer 1

我不确定这是你需要的，但我认为你可以将控制器定义为：

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

Answer 2

首先，我要感谢ExpertSystem建议我以Angular的方式思考。然后我要感谢来自 angular IRC 的 Foxandxss 和 medice ，不是通过代码来改善我的概念和方法。

这是WORKING代码，我想出了上述问题。

实际上，如果没有它，我就不需要指导和管理。

medice：指令很好，但是当你设置点击事件时   修改dom，它会破坏

medice：angularjs无法正确绑定指令

以下是我的控制器代码 -

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope){

  $scope.cnctnum = [];
  $scope.cncttype = [];

  $scope.types = [
    {name: "Cell", value: 1},
    {name: "Work", value: 2},
    {name: "Home", value: 3},
    {name: "Fax", value: 4}
  ];

  $scope.items = [];
  var i =0;
  $scope.addCnt = function(){
    $scope.items.push(i);
    i++;
  };

  $scope.remCl = function(index){
    $scope.cnctnum.splice(index, 1);
    $scope.cncttype.splice(index, 1);
    $scope.items.splice(index, 1);
  };

  $scope.getval = function(){
    console.log($scope.cnctnum);
    console.log($scope.cncttype);
  };

});

通过angularjs中的指令将动态模型添加到新创建的元素中

2 个答案: