2016-09-26 57 views
0

我有一個包含以下的指令:設置動態NG-模型每次一條指令被稱爲

每次單擊一個按鈕時,一種新的形式附加到表單。

問題:我需要爲每個新窗體添加不同的ng模型。 幾乎敲我的頭撞在牆上了一整天后,我仍然一無所知

注:使用NG重複動態NG-模型是不可能的,因爲我只需要在一個時間

追加1個模板下面的代碼:plunkr版本:https://plnkr.co/edit/4zjo8xRHD5gMm5kU77Tv?p=info

app.directive("addIsmb", function ($compile) { 
    return { 
     restrict: "A", 
     link: function (scope, element, attrs) { 
      element.bind("click", function() { 
       var toAppend = $compile("<i-smb></i-smb>")(scope) 
       $(".iSMBHolder").append(toAppend); 
       $(".countISMB").each(function(){ 
        var self = $(this); 
        var index = self.parent().index(); 
        scope.ctrl.iIndex = index+1; 
       }) 
       console.log(scope.ctrl.iIndex) 
      }) 
     } 
    } 
}) 

我的指令爲模板

app.directive("isbm", function(){ 
    return { 
    restrict: "E", 
    templateURL: "app/location of my template", 
    replace: false 
    } 
}) 

控制器:我嘗試創建一個返回for循環內的對象的數組,以便我可以使用返回的每個對象作爲ng模型,但失敗。

app.controller("separated.inputs", ["C2CData", "channelData", function (C2CData, channelData) { 
    self.iList = new Array(10); 

    for (i = 0; i < self.iList.length; i++){ 
     self.iList[i] = {} 
    }; 

}]) 

,我需要有動態NG-模型

<div md-whiteframe="6" layout="column" class="iSMB animated fadeInUp countISMB ncInputSettings" get-idex> 
    <div layout="row" layout-align="space-between center" class="notToBeFolded"> 
     <div layout="row" layout-align="start center" id="ncInputTitle"> 
      <md-icon md-svg-src="icons/ncInputTitleSettings.svg" class="md-36"></md-icon> 
      <md-content>{{ctrl.iList[ctrl.iIndex.name]}}</md-content> 
     </div> 
     <md-button class="md-primary ncDeleteSMBS" delete-ismb>CANCEL</md-button> 
    </div> 
    <div class="toBeFolded"> 
     <div layout="row" class="ncInputRow"> 
      <div flex="40" class="ncBorderMe" layout-align="start center" layout="row" layout-padding> 
       <md-content class="md-heading">Name</md-content> 
      </div> 
      <div flex layout="row" layout-align="space-between center" layout-padding> 
       <input placeholder="Pick a Name" disabled class="ncInputListInput" ng-model="ctrl.iList[ctrl.iIndex.name]"/> 
       <md-button edit-field aria-label="Chose a name" class="ncMdButton"> 
        <md-icon class="material-icon ncIconNoMargin">edit</md-icon> 
       </md-button> 
      </div> 
     </div> 
    </div> 
</div> 

回答

0

您可以只使用ng-model內的JavaScript表達式最喜歡的角度指令的模板。你爲什麼不試試這個:

<input placeholder="Pick a Name" disabled class="ncInputListInput" ng-model="scopeFunction($index)"/> 

然後你的控制器中:

$scope.scopeFunction = function(index) { 
    return $scope.models[index+1]; //Or something of that sort 
} 
+0

我試過,但它不工作,你可以請你的代碼更具體? –