AngularJS - liên kết ng-mô hình với một biến mà tên được lưu trữ bên trong biến khác

Tôi đang cố gắng để ràng buộc giá trị của một trường đầu vào cho một biến. Tôi không biết tên của biến này a priori; nó được lưu trữ trong một biến khác.AngularJS - liên kết ng-mô hình với một biến mà tên được lưu trữ bên trong biến khác

Đây là html:

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

và đây là bộ điều khiển:

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

Tôi cũng là một fiddle thực hiện.

Điều này không hoạt động vì hiện tại liên kết nằm giữa trường nhập và biến số model. Thay vào đó, tôi sẽ liên kết trường nhập vào biến mà tên được lưu trữ bên trong biến số $scope.model (trong trường hợp này là realModel).

Có thể không? Làm sao?

Nguồn

2013-04-12 Bruno

Vâng, có thể của nó. Tôi không hiểu tại sao bạn muốn làm điều đó, nhưng tôi có thể chỉ cho bạn cách làm thế nào. Tôi không thể bắt đầu fiddle, nhưng tôi sao chép vào một plnkr: http://plnkr.co/edit/o1gFf1lMq4Pg5iVoVyUN?p=preview

Bạn tạo một chỉ thị biến đổi mẫu gốc thành mẫu mới bằng cách sử dụng $ compile. Chỉ thị mới:

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

Cập nhật html (thay đổi từ ng-mô hình để ng-bind-mô hình, chỉ thị mới)

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

Nguồn

2013-04-12 07:33:57

+1 là không đủ cho câu trả lời này ... Cảm ơn rất nhiều – Bruno

+15

tạo ra một chỉ thị có tên là ngXxx là một thực hành không tốt ("không tiền tố chỉ thị của riêng bạn với ng hoặc họ có thể xung đột với chỉ thị bao gồm trong một phiên bản tương lai của Angular" - [doc] (http://docs.angularjs.org/guide/directive)) – 7seb

Tôi tương đối mới đối với Angularjs. Tôi biết những gì bạn đang yêu cầu có thể trong Javascript bằng cách sử dụng cửa sổ. Tôi không chắc về Angular. Tôi đã sửa đổi mã để đạt được một giải pháp gần càng tốt:

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

Thử fiddle:

Nguồn

2013-04-12 06:36:12

này không phù hợp với trường hợp của tôi, bởi vì bạn đang giả sử tôi biết rằng biến tôi muốn liên kết với lĩnh vực này là model.value ... thay vì tôi không biết tên của biến ... tất cả tôi biết là tên của nó được lưu trữ trong model.var (có tham chiếu đến mã của bạn). – Bruno

tôi cố gắng sử dụng các câu trả lời trước bên ng-repeat và nó didn' t làm việc. Nó sử dụng hàm compile, có nghĩa là tất cả các chỉ thị đã sử dụng giá trị được truyền cuối cùng. Nếu bạn sử dụng chức năng liên kết có vẻ như để làm việc như mong đợi, tức là

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

Nguồn

2013-12-03 21:20:05

Một lựa chọn đơn giản - miễn là nó có thể thay đổi các mô hình một chút - HTML:

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

mẫu:

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

Nguồn

2014-02-11 17:07:25 MiMo

câu trả lời hay nhất IMO –

_Điều này có nghĩa là tất cả các biến của bạn cần phải nằm trong 'vars', mặc dù vậy sucks_ – brod

Câu trả lời (hiện đang thắng) của người dùng2273266 thực sự là không chính xác. Trong khi nó sẽ làm việc nếu bạn chỉ sử dụng chỉ thị một lần, nó thực sự gây nhầm lẫn phần tử mẫu và các đối tượng phần tử mẫu và sẽ đặt họ cuối cùng trên tất cả các phần tử mà nó biểu hiện trong vòng lặp.

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

Phiên bản này khắc phục sự cố bằng cách tách hoạt động trên mẫu và cá thể, vì vậy cuộc gọi sau liên kết chỉ sửa đổi cá thể chứ không phải mẫu.

Cũng thay đổi tiền tố 'ng' được đặt trước.

Nguồn

2014-11-18 22:22:52

-1

Điều bạn thiếu ở đây là chỉ thị ng-app, không cần sử dụng chỉ thị rõ ràng cho mô hình ng.

này hoạt động:

<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>

Nguồn

2015-06-11 18:34:12

AngularJS - liên kết ng-mô hình với một biến mà tên được lưu trữ bên trong biến khác

Trả lời

Các vấn đề liên quan