Атрибут AngularJS-Value на входном текстовом поле игнорируется, когда используется ng-модель?
используя AngularJS, если я устанавливаю простое значение текстового поля ввода на что-то вроде "bob" ниже. Значение не отображается, если ng-model
атрибут добавлен.
<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()
функции параметра порядка.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, который нарушает угловые соглашения в пользу HTML. @dmackerman упомянул директивы в комментарии к моему ответу, и я полностью пропустил это до сих пор. С этим входом, вот право способ сделать это, не нарушая угловые или HTML conventions:
есть также способ получить как захватить значение элемента и использовать чтобы обновить модель в директиве:
<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
атрибут как угловое выражение (хотя я бы, вероятно, использовал для этого другой атрибут [custom], поэтому стандартные атрибуты 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-модель текстового поля двухсторонним
- С использованием 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>
Примечание: в этом выше случае у меня уже был ответ JSON к ng-модели и значению я просто добавляю еще одно свойство к объекту JS как "MarketPeers". Таким образом, модель и значение могут зависеть от необходимости, но я думаю, что этот процесс поможет иметь как ng-модель, так и значение, но не иметь их на одном элементе.
у меня была аналогичная проблема. Я не смог использовать
value="something"
для отображения и редактирования. Я должен был использовать следующую команду внутри моего<input>
вместе с объявленной моделью ng.[(ngModel)]=userDataToPass.pinCode
где у меня есть список данных в объекте
userDataToPass
и элемент, который мне нужно отобразить и отредактироватьpinCode
.для того же , я говорил это видео на YouTube