Атрибут AngularJS-Value на входном текстовом поле игнорируется, когда используется ng-модель?
используя AngularJS, если я установил простое значение текстового поля ввода на что-то вроде "bob" ниже. Значение не отображается, если является.
<input type="text"
id="rootFolder"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
кто-нибудь знает о простой работе вокруг, чтобы по умолчанию этот вход к чему-то и сохранить ng-model
? Я попытался использовать ng-bind
со значением по умолчанию, но это, кажется, не работает.
10 ответов
это желаемое поведение, вы должны определить модель в контроллере, а не в представлении.
<div ng-controller="Main">
<input type="text" ng-model="rootFolders">
</div>
function Main($scope) {
$scope.rootFolders = 'bob';
}
Войта описал "угловой путь", но если вам действительно нужно сделать эту работу, @urbanek недавно опубликовал обходной путь с помощью ng-init:
<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">
https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ
переопределение директивы ввода, похоже, выполняет эту работу. Я внес некоторые незначительные изменения в Дэн ХансейкерС:
- добавлена проверка для ngModel перед попыткой использовать
$parse().assign()
на полях без атрибутов ngModel. - исправил
assign()
порядок функции param.
app.directive('input', function ($parse) {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if (attrs.ngModel && attrs.value) {
$parse(attrs.ngModel).assign(scope, attrs.value);
}
}
};
});
угловой путь
правильный угловой способ сделать это-написать одностраничное приложение AJAX в шаблоне формы, а затем заполнить его динамически из модели. Модель не заполняется из формы по умолчанию, поскольку модель является единственным источником истины. Вместо этого Angular пойдет в другую сторону и попытается заполнить форму из модели.
Если, однако, у вас нет времени, чтобы начать с нуля
если у вас есть приложение написано, это может это связано с некоторыми изрядными архитектурными изменениями. Если вы пытаетесь использовать Angular для улучшения существующей формы, а не для создания всего одностраничного приложения с нуля, вы можете извлечь значение из формы и сохранить его в области во время ссылки с помощью директивы. Затем Angular свяжет значение в области с формой и сохранит его в синхронизации.
использование директивы
вы можете использовать относительно простую директиву, чтобы вытащить значение из формы и загрузить его в текущая область. Здесь я определил директиву initFromForm.
var myApp = angular.module("myApp", ['initFromForm']);
angular.module('initFromForm', [])
.directive("initFromForm", function ($parse) {
return {
link: function (scope, element, attrs) {
var attr = attrs.initFromForm || attrs.ngModel || element.attrs('name'),
val = attrs.value;
if (attrs.type === "number") {val = parseInt(val)}
$parse(attr).assign(scope, val);
}
};
});
вы можете видеть, что я определил пару запасных вариантов, чтобы получить имя модели. Вы можете использовать эту директиву в сочетании с директивой ngModel или привязать к чему-то, кроме $scope, если хотите.
используйте его так:
<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}
Примечание это будет работать и с текстовой, и выберите меню.
<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}
обновление: мой первоначальный ответ включал наличие контроллера, содержащего код DOM-aware, который нарушает угловые соглашения в пользу HTML. @dmackerman упомянул директивы в комментарии к моему ответу, и я полностью пропустил это до сих пор. С этим вводом, вот право способ сделать это, не нарушая угловые или HTML-код конвенций:
есть также способ получить как захватить значение элемента и использовать чтобы обновить модель в директиве:
<div ng-controller="Main">
<input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40" />
</div>
и затем:
app.directive('input', ['$parse', function ($parse) {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attrs) {
if(attrs.value) {
$parse(attrs.ngModel).assign(scope, attrs.value);
}
}
};
}]);
вы можете, конечно, изменить вышеуказанную директиву, чтобы сделать больше с value
атрибут перед установкой модели на ее значение, включая использование $parse(attrs.value, scope)
для лечения value
атрибут как угловое выражение (хотя я бы, вероятно, использовал другой [пользовательский] атрибут для этого лично, поэтому стандартные атрибуты HTML последовательно рассматриваются как константы).
кроме того, есть аналогичный вопрос на создание данных, шаблонных в доступных для ng-model что также может представлять интерес.
Если вы используете директиву AngularJs ngModel, помните, что значение value
атрибут не привязывается к полю ngModel.Вы должны init его самостоятельно и лучший способ сделать это,это
<input type="text"
id="rootFolder"
ng-init="rootFolders = 'Bob'"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
Это небольшая модификация предыдущих ответов...
нет необходимости в $ parse
angular.directive('input', [function () {
'use strict';
var directiveDefinitionObject = {
restrict: 'E',
require: '?ngModel',
link: function postLink(scope, iElement, iAttrs, ngModelController) {
if (iAttrs.value && ngModelController) {
ngModelController.$setViewValue(iAttrs.value);
}
}
};
return directiveDefinitionObject;
}]);
привет вы можете попробовать ниже методы с инициализацией модели.
здесь вы можете инициализировать ng-модель textbox двухсторонним
- С использованием ng-init
- С использованием $ scope в js
<!doctype html>
<html >
<head>
<title>Angular js initalize with ng-init and scope</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="app" >
<h3>Initialize value with ng-init</h3>
<!-- Initlialize model values with ng-init -->
<div ng-init="user={fullname:'Bhaskar Bhatt',email:'bhatt.bhaskar88@gmail.com',address:'Ahmedabad'};">
Name : <input type="text" ng-model="user.fullname" /><br/>
Email : <input type="text" ng-model="user.email" /><br/>
Address:<input type="text" ng-model="user.address" /><br/>
</div>
<!-- initialize with js controller scope -->
<h3>Initialize with js controller</h3>
<div ng-controller="alpha">
Age:<input type="text" name="age" ng-model="user.age" /><br/>
Experience : <input type="text" name="experience" ng-model="user.exp" /><br/>
Skills : <input type="text" name="skills" ng-model="user.skills" /><br/>
</div>
</body>
<script type="text/javascript">
angular.module("app",[])
.controller("alpha",function($scope){
$scope.user={};
$scope.user.age=27;
$scope.user.exp="4+ years";
$scope.user.skills="Php,javascript,Jquery,Ajax,Mysql";
});
</script>
</html>
проблема в том, что вы должны установить ng-модель в родительский элемент, где вы хотите установить ng-значение/значение . Как упоминалось Angular:
он в основном используется на элементах ввода[radio] и option, так что при выборе элемента ngModel этого элемента (или его родительского элемента select) устанавливается в связанное значение.
например: это выполненный код:
<div class="col-xs-12 select-checkbox" >
<label style="width: 18em;" ng-model="vm.settingsObj.MarketPeers">
<input name="radioClick" type="radio" ng-click="vm.setPeerGrp('market');"
ng-value="vm.settingsObj.MarketPeers"
style="position:absolute;margin-left: 9px;">
<div style="margin-left: 35px;color: #717171e8;border-bottom: 0.5px solid #e2e2e2;padding-bottom: 2%;">Hello World</div>
</label>
</div>
Примечание: в этом случае я alreday имел ответ JSON к ng-модели и значению я просто добавляю другое свойство к объекту JS как "MarketPeers". Таким образом, модель и значение могут зависеть от необходимости, но я думаю, что этот процесс поможет иметь как ng-модель, так и значение, но не иметь их на одном элементе.
у меня была аналогичная проблема. Я не смог использовать value="something"
для отображения и редактирования.
Я должен был использовать следующую команду внутри моего <input>
вместе с объявленной моделью ng.
[(ngModel)]=userDataToPass.pinCode
где у меня есть список данных в объекте userDataToPass
и элемент, который мне нужно отобразить и отредактировать, это pinCode
.
для того же , я говорил это видео на YouTube