AngularJS - 將ng模型綁定到一個名稱存儲在另一個變量中的變量

我試圖將輸入字段的值綁定到變量。我不知道這個變量的名字先驗;它存儲在另一個變量中。AngularJS - 將ng模型綁定到一個名稱存儲在另一個變量中的變量

這是HTML：

<body ng-controller="stageController"> 
    <form name="myForm" novalidate=""> 
     <input type="text" name="myText" ng-model="model" /> 
    </form> 
</body>

，這是控制器：

function stageController($scope) { 
    $scope.model = 'realModel'; // contains the name of the variable that i would bind to the field 
    $scope.realModel = 'initial value of the field'; 
}

我也是一個fiddle製成。

這不起作用，因爲當前綁定是在輸入字段和model變量之間。相反，我會將輸入字段綁定到名稱存儲在$scope.model變量（本例中爲realModel）內的變量。

可能嗎？怎麼樣？

來源

2013-04-12 Bruno

是，其可能的。我不明白你爲什麼想這樣做，但我可以告訴你如何去做。我無法啓動小提琴，但我複製到了一個plnkr：http://plnkr.co/edit/o1gFf1lMq4Pg5iVoVyUN?p=preview

您創建一個指令，使用$ compile將原始模板轉換爲新模板。新指令：

directive('ngBindModel',function($compile){ 
    return{ 
     compile:function(tEl,tAtr){ 
      tEl[0].removeAttribute('ng-bind-model') 
      return function(scope){ 
       tEl[0].setAttribute('ng-model',scope.$eval(tAtr.ngBindModel)) 
       $compile(tEl[0])(scope) 
       console.info('new compiled element:',tEl[0]) 
      } 
     } 
    } 
})

更新的HTML（從納克模型變化到NG-綁定模型，新指令）

<input type="text" name="myText" ng-bind-model="model" />

來源

2013-04-12 07:33:57

+1對於這個答案是不夠的......非常感謝 – Bruno

+15

創建一個名爲ngXxx的指令是一種不好的做法（「不要在ng前面加上自己的指令，否則它們可能與未來版本的Angular中包含的指令衝突」 - [doc]（http://docs.angularjs.org/guide/directive）） – 7seb

我對Angularjs比較陌生。我知道你在JavaScript使用窗口可能會要求什麼。我不確定Angular。我已經修改了代碼，以實現接近可能的解決方案：

$scope.model = {'var':'realModel','value':'initial value of the field'};

嘗試fiddle：

來源

2013-04-12 06:36:12

這不適合我的情況，因爲我們假定你是我知道我要綁定到該領域的變量是model.value ... 相反，我不知道變量的名稱......我只知道它的名字存儲在model.var中（引用你的代碼）。 – Bruno

我試圖用內部ng-repeat以前的答案，它沒」工作。它使用compile函數，這意味着所有指令都使用最後傳入的值。如果您使用鏈接功能似乎按預期方式工作，即

.directive('ngBindModel',function($compile){ 
     return{ 
     link:function(scope,element,attr){ 
      element[0].removeAttribute('ng-bind-model'); 
      element[0].setAttribute('ng-model',scope.$eval(attr.ngBindModel)); 
      $compile(element[0])(scope); 
     } 
     }; 
    })

來源

2013-12-03 21:20:05

一個簡單的選擇 - 只要它是可以改變模型一點點 - HTML：

<body ng-controller="stageController"> 
    <form name="myForm" novalidate=""> 
     <input type="text" name="myText" ng-model="vars[model]" /> 
    </form> 
</body>

型號：

function stageController($scope) { 
    $scope.model = 'realModel'; // contains the name of the variable that i would bind to the field 
    $scope.vars = {}; // variables container 
    $scope.vars.realModel = 'initial value of the field'; 
}

來源

2014-02-11 17:07:25 MiMo

最佳答案IMO –

_This意味着你所有的變量都需要在'vars'之內，儘管這很有吸引力 – brod

user2273266的（當前獲勝）答案實際上是微妙不正確的。例如，如果您只使用指令一次，它會起作用，但它實際上會混淆模板元素和實例元素對象，並會將其在循環中呈現的所有元素上找到的最後一個名稱。

directive('custBindModel',function($compile){ 
    return{ 
     compile:function(tEl){ 
      tEl[0].removeAttribute('cust-bind-model'); 
      return function(scope, iEl, iAtr){ 
       iEl[0].setAttribute('ng-model',scope.$eval(iAtr.custBindModel)); 
       $compile(iEl[0])(scope); 
       console.info('new compiled element:',tEl[0]); 
      } 
     } 
    } 
})

該版本修正通過該模板和實例分離操作的問題，所以連桿後調用僅修改實例，而不是模板。

還改變了保留的'ng'前綴。

來源

2014-11-18 22:22:52

-1

這裏缺少的是ng-app指令，不需要爲ng-model使用顯式指令。

這工作：

<body ng-app="myApp" ng-controller="stageController"> 
    <form name="myForm" novalidate=""> 
     <input type="text" name="myText" ng-model="realModel" /> 
    </form> 
<script> 
var app = angular.module('myApp', []); 
app.controller('stageController', function($scope) { 
    $scope.model = 'realModel'; 
    $scope.realModel = 'initial value of the field'; 
}) 
</script> 
</body>

來源

2015-06-11 18:34:12

AngularJS - 將ng模型綁定到一個名稱存儲在另一個變量中的變量

回答

相關問題