Giả sử bạn có một biểu mẫu có các giá trị được tải từ cơ sở dữ liệu. Làm thế nào để bạn khởi tạo ng-model?
Thí dụ:
<input name="card[description]" ng-model="card.description" value="Visa-4242">Trong bộ điều khiển của tôi, $ scope.card ban đầu không được xác định. Có cách nào ngoài việc làm một cái gì đó như thế này?
$scope.card = {
description: $('myinput').val()
}Câu trả lời:
Đây là một lỗi phổ biến trong các ứng dụng Angular mới. Bạn không muốn viết các giá trị của mình vào HTML trên máy chủ nếu bạn có thể tránh nó. Nếu thực tế, nếu bạn có thể thoát khỏi việc máy chủ của bạn hiển thị HTML hoàn toàn, thì tốt hơn hết.
Lý tưởng nhất là bạn muốn gửi các mẫu HTML Angular của mình, sau đó kéo xuống các giá trị của bạn thông qua $ http trong JSON và đặt chúng trong phạm vi của bạn.
Vì vậy, nếu có thể, hãy làm điều này:
app.controller('MyController', function($scope, $http) {
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
});
<input type="text" ng-model="card.description" />Nếu bạn hoàn toàn PHẢI kết xuất các giá trị của mình vào HTML từ máy chủ của mình, bạn có thể đặt chúng vào một biến toàn cục và truy cập chúng bằng cửa sổ $:
Trong tiêu đề của trang bạn sẽ viết ra:
<head>
<script>
window.card = { description: 'foo' };
</script>
</head>Và sau đó trong bộ điều khiển của bạn, bạn sẽ có được nó như vậy:
app.controller('MyController', function($scope, $window) {
$scope.card = $window.card;
});Tôi hy vọng điều đó sẽ giúp.
Nếu bạn không thể làm lại ứng dụng của mình để thực hiện những gì @bledh đề xuất (kéo dữ liệu JSON xuống với $ http hoặc $ resource và điền vào $ scope), bạn có thể sử dụng ng-init thay thế:
<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">Xem thêm AngularJS - Thuộc tính giá trị trên hộp văn bản đầu vào bị bỏ qua khi có mô hình ng được sử dụng?
ng-initkhá hữu ích khi đặt giá trị từ mã phía sau / postback Eg <input name="phone" data-ng-model="frm.phone" data-ng-init="frm.phone= '<%: Model.Phone %>'" data-ng-pattern="/^[0-9() \-+]+$/" type="tel" required />. Bit xấu xí? Có, nhưng thủ thuật & giải quyết vấn đề đau đầu tích hợp trong quy trình.
Đây rõ ràng là một thiếu sót, nhưng dễ dàng thêm sửa chữa cho AngularJS. Chỉ cần viết một lệnh nhanh để đặt giá trị mô hình từ trường đầu vào.
<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>Đây là phiên bản của tôi:
var app = angular.module('forms', []);
app.directive('ngInitial', function() {
return {
restrict: 'A',
controller: [
'$scope', '$element', '$attrs', '$parse', function($scope, $element, $attrs, $parse) {
var getter, setter, val;
val = $attrs.ngInitial || $attrs.value;
getter = $parse($attrs.ngModel);
setter = getter.assign;
setter($scope, val);
}
]
};
});controllercho chỉ thị của mình và tại sao không sử dụng linkphương pháp này?. Tôi là người mới chơi angularjs
val = $attrs.ngInitial || $attrs.value || $element.val()có nó hoạt động với các yếu tố được chọn.
IMHO giải pháp tốt nhất là chỉ thị @Kevin Stone, nhưng tôi đã phải nâng cấp nó để hoạt động trong mọi điều kiện (chọn lọc, textarea), và điều này chắc chắn sẽ hoạt động:
angular.module('app').directive('ngInitial', function($parse) {
return {
restrict: "A",
compile: function($element, $attrs) {
var initialValue = $attrs.value || $element.val();
return {
pre: function($scope, $element, $attrs) {
$parse($attrs.ngModel).assign($scope, initialValue);
}
}
}
}
});Bạn có thể sử dụng một chỉ thị tùy chỉnh (có hỗ trợ cho textarea, chọn, radio và hộp kiểm), xem bài đăng trên blog này https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form- các thuộc tính trường / .
Tôi có một cách tiếp cận đơn giản, bởi vì tôi có một số xác nhận và mặt nạ nặng trong các hình thức của tôi. Vì vậy, tôi đã sử dụng jquery để lấy lại giá trị của mình và kích hoạt sự kiện "thay đổi" thành xác nhận:
$('#myidelement').val('123');
$('#myidelement').trigger( "change");Như những người khác đã chỉ ra, việc khởi tạo dữ liệu trên các khung nhìn là không tốt. Tuy nhiên, nên khởi tạo dữ liệu trên Bộ điều khiển. (xem http://docs.angularjs.org/guide/controll )
Vì vậy bạn có thể viết
<input name="card[description]" ng-model="card.description">và
$scope.card = { description: 'Visa-4242' };
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});Bằng cách này, các khung nhìn không chứa dữ liệu và bộ điều khiển khởi tạo giá trị trong khi các giá trị thực đang được tải.
Nếu bạn thích cách tiếp cận của Kevin Stone ở trên https://stackoverflow.com/a/17823590/584761 hãy xem xét một cách tiếp cận dễ dàng hơn bằng cách viết các chỉ thị cho các thẻ cụ thể như 'đầu vào'.
app.directive('input', function ($parse) {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if (attrs.ngModel) {
val = attrs.value || element.text();
$parse(attrs.ngModel).assign(scope, val);
}
}
}; });Nếu bạn đi theo con đường này, bạn sẽ không phải lo lắng về việc thêm ng-ban đầu vào mỗi thẻ. Nó tự động đặt giá trị của mô hình thành thuộc tính giá trị của thẻ. Nếu bạn không đặt thuộc tính value, nó sẽ mặc định là một chuỗi rỗng.
Đây là một cách tiếp cận tập trung vào máy chủ:
<html ng-app="project">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
// Create your module
var dependencies = [];
var app = angular.module('project', dependencies);
// Create a 'defaults' service
app.value("defaults", /* your server-side JSON here */);
// Create a controller that uses the service
app.controller('PageController', function(defaults, $scope) {
// Populate your model with the service
$scope.card = defaults;
});
</script>
<body>
<div ng-controller="PageController">
<!-- Bind with the standard ng-model approach -->
<input type="text" ng-model="card.description">
</div>
</body>
</html>Đó là ý tưởng cơ bản giống như các câu trả lời phổ biến hơn cho câu hỏi này, ngoại trừ $ cung cấp. Giá trị cấp. Giá trị đăng ký một dịch vụ có chứa các giá trị mặc định của bạn.
Vì vậy, trên máy chủ, bạn có thể có một cái gì đó như:
{
description: "Visa-4242"
}Và đưa nó vào trang của bạn thông qua công nghệ phía máy chủ mà bạn chọn. Đây là một ý chính: https://gist.github.com/exclsr/c8c391d16319b2d31a43
Đây là phiên bản chung hơn của các ý tưởng được đề cập ở trên ... Nó chỉ đơn giản kiểm tra xem có bất kỳ giá trị nào trong mô hình hay không, và nếu không, nó sẽ đặt giá trị cho mô hình.
JS:
function defaultValueDirective() {
return {
restrict: 'A',
controller: [
'$scope', '$attrs', '$parse',
function ($scope, $attrs, $parse) {
var getter = $parse($attrs.ngModel);
var setter = getter.assign;
var value = getter();
if (value === undefined || value === null) {
var defaultValueGetter = $parse($attrs.defaultValue);
setter($scope, defaultValueGetter());
}
}
]
}
}HTML (ví dụ sử dụng):
<select class="form-control"
ng-options="v for (i, v) in compressionMethods"
ng-model="action.parameters.Method"
default-value="'LZMA2'"></select>$scopeđến cuộc gọi đến getter()- hy vọng điều này sẽ làm sáng tỏ mọi thứ cho bất cứ ai khác đang thử điều này!
Tôi đã thử những gì @Mark Rajcok gợi ý. Nó hoạt động cho các giá trị Chuỗi (Visa-4242). Vui lòng tham khảo fiddle này .
Từ câu đố:
Điều tương tự được thực hiện trong fiddle có thể được thực hiện bằng cách sử dụng ng-repeat, mà mọi người có thể đề nghị. Nhưng sau khi đọc câu trả lời được đưa ra bởi @Mark Rajcok, tôi chỉ muốn thử tương tự cho một hình thức với một loạt các hồ sơ. Mọi thứ hoạt động tốt cho đến khi tôi có $ scope.profiles = [{}, {}]; mã trong bộ điều khiển. Nếu tôi loại bỏ mã này, tôi nhận được lỗi. Nhưng trong các kịch bản bình thường, tôi không thể in $scope.profiles = [{},{}]; khi tôi in hoặc lặp lại html từ máy chủ. Liệu có thể thực hiện các thao tác trên, theo cách tương tự như @Mark Rajcok đã làm cho các giá trị chuỗi như thế nào <input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">, mà không phải lặp lại phần JavaScript từ máy chủ.
Chỉ cần thêm hỗ trợ cho phần tử được chọn để Ryan Montgomery "sửa"
<select class="input-control" ng-model="regCompModel.numberOfEmployeeId" ng-initial>
<option value="1af38656-a752-4a98-a827-004a0767a52d"> More than 500</option>
<option value="233a2783-db42-4fdb-b191-0f97d2d9fd43"> Between 250 and 500</option>
<option value="2bab0669-550c-4555-ae9f-1fdafdb872e5"> Between 100 and 250</option>
<option value="d471e43b-196c-46e0-9b32-21e24e5469b4"> Between 50 and 100</option>
<option value="ccdad63f-69be-449f-8b2c-25f844dd19c1"> Between 20 and 50</option>
<option value="e00637a2-e3e8-4883-9e11-94e58af6e4b7" selected> Less then 20</option>
</select>
app.directive('ngInitial', function () {
return {
restrict: 'A',
controller: ['$scope', '$element', '$attrs', '$parse', function ($scope, $element, $attrs, $parse) {
val = $attrs.sbInitial || $attrs.value || $element.val() || $element.text()
getter = $parse($attrs.ngModel)
setter = getter.assign
setter($scope, val)
}]
}});