Допустим, у вас есть форма, в которой значения загружены из базы данных. Как инициализировать ng-модель?
Пример:
<input name="card[description]" ng-model="card.description" value="Visa-4242">В моем контроллере $ scope.card изначально не определен. Есть ли способ, кроме этого?
$scope.card = {
description: $('myinput').val()
}
Ответы:
Это распространенная ошибка в новых приложениях Angular. Вы не хотите записывать свои значения в свой HTML на сервере, если можете этого избежать. На самом деле, тем лучше, если вам удастся отказаться от того, чтобы ваш сервер полностью отображал HTML.
В идеале вы хотите отправить свои шаблоны HTML Angular, а затем извлечь свои значения через $ http в JSON и поместить их в свою область видимости.
Итак, если возможно, сделайте следующее:
app.controller('MyController', function($scope, $http) {
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
});
<input type="text" ng-model="card.description" />
Если вы ОБЯЗАТЕЛЬНО ДОЛЖНЫ отображать свои значения в HTML со своего сервера, вы можете поместить их в глобальную переменную и получить к ним доступ с помощью $ window:
В заголовке своей страницы вы должны написать:
<head>
<script>
window.card = { description: 'foo' };
</script>
</head>
И тогда в вашем контроллере вы получите это так:
app.controller('MyController', function($scope, $window) {
$scope.card = $window.card;
});
Надеюсь, это поможет.
Если вы не можете переработать свое приложение, чтобы оно выполняло то, что предлагает @blesh (вытащить данные JSON с помощью $ http или $ resource и заполнить $ scope), вы можете вместо этого использовать ng-init :
<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">См. Также AngularJS - Атрибут Value в текстовом поле ввода игнорируется, когда используется ng-модель?
ng-initочень полезно при установке значений из кода программной части / обратной передачи, например <input name="phone" data-ng-model="frm.phone" data-ng-init="frm.phone= '<%: Model.Phone %>'" data-ng-pattern="/^[0-9() \-+]+$/" type="tel" required />. Немного некрасиво? Да, но помогает решить проблему с интеграцией.
Это явно недостающее, но легко добавляемое исправление для AngularJS. Просто напишите короткую директиву, чтобы установить значение модели из поля ввода.
<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>Вот моя версия:
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);
}
]
};
});
controllerдля своей директивы и почему не использовали linkметод ?. Я новичок в angularjs
val = $attrs.ngInitial || $attrs.value || $element.val()на, чтобы он работал с выбранными элементами.
ИМХО лучшим решением является директива @Kevin Stone, но мне пришлось обновить ее, чтобы она работала в любых условиях (например, select, textarea), и это точно работает:
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);
}
}
}
}
});
Вы можете использовать настраиваемую директиву (с поддержкой textarea, select, radio и checkbox), проверьте это сообщение в блоге https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form- поля-атрибуты / .
У меня простой подход, потому что в моих формах есть тяжелые проверки и маски. Итак, я использовал jquery, чтобы снова получить свое значение и запустить событие «изменение» для проверки:
$('#myidelement').val('123');
$('#myidelement').trigger( "change");
Как указывали другие, инициализация данных в представлениях не является хорошей практикой. Однако рекомендуется инициализировать данные на контроллерах. (см. http://docs.angularjs.org/guide/controller )
Так что вы можете написать
<input name="card[description]" ng-model="card.description">и
$scope.card = { description: 'Visa-4242' };
$http.get('/getCardInfo.php', function(data) {
$scope.card = data;
});
Таким образом, представления не содержат данных, и контроллер инициализирует значение во время загрузки реальных значений.
Если вам нравится подход Кевина Стоуна выше https://stackoverflow.com/a/17823590/584761, рассмотрите более простой подход, написав директивы для определенных тегов, таких как 'input'.
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);
}
}
}; });
Если вы пойдете по этому пути, вам не придется беспокоиться о добавлении ng-initial к каждому тегу. Он автоматически устанавливает значение модели для атрибута значения тега. Если вы не установите атрибут значения, по умолчанию будет пустая строка.
Вот подход, ориентированный на сервер:
<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>
Это та же основная идея, что и в более популярных ответах на этот вопрос, за исключением того, что $ provide.value регистрирует службу, которая содержит ваши значения по умолчанию.
Итак, на сервере у вас может быть что-то вроде:
{
description: "Visa-4242"
}
И разместите его на своей странице с помощью выбранной вами серверной технологии. Вот суть: https://gist.github.com/exclsr/c8c391d16319b2d31a43
Это более общая версия идей, упомянутых выше ... Он просто проверяет, есть ли какое-либо значение в модели, а если нет, он устанавливает значение для модели.
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 (пример использования):
<select class="form-control"
ng-options="v for (i, v) in compressionMethods"
ng-model="action.parameters.Method"
default-value="'LZMA2'"></select>
$scopeк вызову getter()- надеюсь, это проясняет ситуацию для всех, кто пытается это сделать!
Я попробовал то, что предложил @Mark Rajcok. Он работает со строковыми значениями (Visa-4242). Пожалуйста, обратитесь к этой скрипке .
Со скрипки:
То же, что и в скрипте, можно сделать и с помощью ng-repeat, что можно порекомендовать. Но после прочтения ответа @Mark Rajcok я просто хотел попробовать то же самое для формы с массивом профилей. Все работает хорошо, пока у меня не будет $ scope.profiles = [{}, {}]; код в контроллере. Если я удалю этот код, я получаю ошибки. Но в обычных сценариях я не могу печатать, $scope.profiles = [{},{}]; поскольку я печатаю или отображаю html с сервера. Можно ли будет выполнить вышеизложенное аналогично тому, как это сделал @Mark Rajcok для строковых значений, например <input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">, без необходимости повторять часть JavaScript с сервера.
Только что добавлена поддержка выбора элемента в "исправить" Райана Монтгомери.
<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)
}]
}});