답변:
원하는 동작이므로 뷰가 아닌 컨트롤러에서 모델을 정의해야합니다.
<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
value="Bob"입력 태그에 참여할 필요가 없음을 확인합니다 .
입력 지시문을 재정의하면 작업을 수행하는 것 같습니다. 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}}input="text". 당신이있는 경우 number가 발생합니다 모델 유형이 아닌 number docs.angularjs.org/error/ngModel/numfmt?p0=333
if (attrs.type === "number") val = parseInt(val);
업데이트 : 내 컨트롤러에는 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 비디오를 참조