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

Trialcoder 发表于 Dev

Trialcoder

以下是我的PLNKR代码，它工作正常。

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

我在提出问题之前先搜索了问题，但是由于我是angular指令的新手，所以我对结果感到困惑，请让我知道要获取结果还需要添加什么。

以下是我期望的结果-

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

另外，我需要在“编辑”模式下使用相同的表单，让我知道在为编辑案例开发此功能时需要记住的其他事项。

以下是我的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。让我知道如何介绍此方法以获得上述结果。

Trialcoder

首先，我要感谢ExpertSystem建议我以Angular的方式进行思考。然后，我要感谢angular IRC的Foxandxsss和药物，不是通过代码来使事情正确，而是改善了我的角度概念和方法。

这是工作代码，我针对上述问题提出了。

实际上，我不需要指令，没有指令就可以轻松地进行管理。

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);
  };

});