AngularJS-ng-model을 사용하면 입력 텍스트 상자의 값 속성이 무시됩니까?
간단한 입력 텍스트 상자 값을 아래 "bob"과 같은 값으로 설정 한 경우 AngularJS 사용 ng-model속성이 추가 되면 값이 표시되지 않습니다 .
<input type="text"
id="rootFolder"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
누구나이 입력을 무언가로 기본 설정하고 ng-model? ng-bind기본값 을 사용하여 시도했지만 작동하지 않는 것 같습니다.
원하는 동작이므로 뷰가 아닌 컨트롤러에서 모델을 정의해야합니다.
<div ng-controller="Main">
<input type="text" ng-model="rootFolders">
</div>
function Main($scope) {
$scope.rootFolders = 'bob';
}
Vojta는 "Angular way"를 설명했지만 실제로이 작업을 수행해야하는 경우 @urbanek은 최근 ng-init를 사용하여 해결 방법을 게시했습니다.
<input type="text" ng-model="rootFolders" ng-init="rootFolders='Bob'" value="Bob">
https://groups.google.com/d/msg/angular/Hn3eztNHFXw/wk3HyOl9fhcJ
입력 지시문을 재정의하면 작업을 수행하는 것 같습니다. Dan Hunsaker 의 코드 를 약간 변경했습니다 .
$parse().assign()ngModel 속성이없는 필드 에서 사용하기 전에 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은 내 대답에 대한 의견에서 지시문을 언급했으며 지금까지는 완전히 놓쳤습니다. 이 입력을 통해 Angular 또는 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);
}
}
};
}]);
물론 속성을 Angular 표현식으로 취급하는 데 value사용하는 $parse(attrs.value, scope)것을 포함하여 모델을 값으로 설정하기 전에 속성으로 더 많은 작업을 수행하도록 위의 지시문을 수정할 수 있습니다 value(개인적으로는 다른 [custom] 속성을 사용하지만 표준 HTML 속성은 일관되게 상수로 취급됩니다).
또한 ng-model에 템플릿 데이터를 사용할 수있게 만드는 것과 비슷한 질문 이 있습니다.
AngularJs ngModel 지시문을 사용하는 경우 value속성 값이 ngModel 필드에서 바인딩되지 않습니다. 기억 하십시오. 직접 입력해야하며이를 수행하는 가장 좋은 방법은 다음과 같습니다.
<input type="text"
id="rootFolder"
ng-init="rootFolders = 'Bob'"
ng-model="rootFolders"
disabled="disabled"
value="Bob"
size="40"/>
이것은 이전 답변에 약간 수정되었습니다 ...
$ 구문 분석이 필요하지 않습니다
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-model을 양방향으로 초기화 할 수 있습니다
-ng-init 사용
-js에서 $ scope 사용
<!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-model을 ng-value / value를 설정하려는 상위 요소로 설정해야한다는 것입니다. Angular가 언급했듯이 :
입력 [라디오] 및 옵션 요소에 주로 사용되므로 요소를 선택할 때 해당 요소 (또는 선택 상위 요소)의 ngModel이 바운드 값으로 설정됩니다.
예 : 이것은 실행 된 코드입니다.
<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>
참고 : 위의 경우에 이미 ng-model 및 값에 대한 JSON 응답이 있었으므로 JS 객체에 다른 속성을 "MarketPeers"로 추가하고 있습니다. 따라서 모델과 가치는 필요에 따라 다를 수 있지만 ng-model과 가치는 있지만 동일한 요소에 두지 않는 것이이 프로세스가 도움이 될 것이라고 생각합니다.
비슷한 문제가있었습니다. value="something"표시하고 편집하는 데 사용할 수 없었습니다 . <input>선언 된 모델과 함께 아래 명령을 사용해야했습니다 .
[(ngModel)]=userDataToPass.pinCode
객체에 데이터 목록이 userDataToPass있고 표시하고 편집 해야하는 항목은 pinCode입니다.
, 나는 이 YouTube 비디오를 참조
'IT story' 카테고리의 다른 글
| JDK 8의 PermGen 제거 (0) | 2020.04.25 |
|---|---|
| 비 정적 방법에는 대상이 필요합니다 (0) | 2020.04.25 |
| div를 나란히 배치하는 방법 (0) | 2020.04.25 |
| 두 배열이 JavaScript와 같은지 확인하는 방법은 무엇입니까? (0) | 2020.04.25 |
| libuv는 Boost / ASIO와 어떻게 비교됩니까? (0) | 2020.04.25 |