반응형
Angular가 있는 배열 작성 방법JS의 ng-model
전화기를 가지고 있는 어레이를 만들려고 하는데, 이 코드가 있어요.
<input type="text" ng-model="telephone[0]" />
<input type="text" ng-model="telephone[1]" />
하지만 $scope에 접속할 수 없습니다.전화
먼저 해야 할 일이 있다.정의해야 합니다.$scope.telephone컨트롤러에서 어레이로 사용할 수 있습니다.
$scope.telephone = [];
새로운 입력을 추가할 때 ng-model이 인식되지 않는 문제를 해결하려면 이 문제를 해결하려면$compile각도 서비스
$compile의 Angular.js API 참조:
HTML 문자열 또는 DOM을 템플릿으로 컴파일하여 템플릿 함수를 생성합니다.이 함수를 사용하여 스코프와 템플릿을 링크할 수 있습니다.
// I'm using Angular syntax. Using jQuery will have the same effect
// Create input element
var input = angular.element('<div><input type="text" ng-model="telephone[' + $scope.inputCounter + ']"></div>');
// Compile the HTML and assign to scope
var compile = $compile(input)($scope);
JSFiddle 보기
문제 없습니다.http://jsfiddle.net/qwertynl/htb9h/
내 Javascript:
var app = angular.module("myApp", [])
app.controller("MyCtrl", ['$scope', function($scope) {
$scope.telephone = []; // << remember to set this
}]);
당신은 다양한 것을 할 수 있습니다.내가 할 일은 이것이다.
전화 번호의 데이터 구조가 되는 범위상의 배열을 작성합니다.
$scope.telephone = '';
$scope.numbers = [];
그럼 당신의 html에 이걸 넣겠습니다.
<input type="text" ng-model="telephone">
<button ng-click="submitNumber()">Submit</button>
그런 다음 사용자가 [Submit Number()]를 클릭하면 새로운 전화번호가 번호 배열에 푸시됩니다.
$scope.submitNumber = function(){
$scope.numbers.push($scope.telephone);
}
한 가지 방법은 어레이를 개체로 변환하여 범위에서 사용하는 것입니다(어레이 시뮬레이션).이 방법에는 템플릿을 유지할 수 있는 이점이 있습니다.
$scope.telephone = {};
for (var i = 0, l = $scope.phones.length; i < l; i++) {
$scope.telephone[i.toString()] = $scope.phone[i];
}
<input type="text" ng-model="telephone[0.toString()]" />
<input type="text" ng-model="telephone[1.toString()]" />
저장 후 다시 변경합니다.
$scope.phones = [];
for (var i in $scope.telephone) {
$scope.phones[parseInt(i)] = $scope.telephone[i];
}
이거면 될 거야.
app = angular.module('plunker', [])
app.controller 'MainCtrl', ($scope) ->
$scope.users = ['bob', 'sean', 'rocky', 'john']
$scope.test = ->
console.log $scope.users
HTML:
<input ng-repeat="user in users" ng-model="user" type="text"/>
<input type="button" value="test" ng-click="test()" />
ng-model을 사용하여 입력 배열을 생성하는 방법
를 사용합니다.ng-repeat지시:
<ol>
<li ng-repeat="n in [] | range:count">
<input name="telephone-{{$index}}"
ng-model="telephones[$index].value" >
</li>
</ol>
데모
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.count = 3;
$scope.telephones = [];
})
.filter("range",function() {
return (x,n) => Array.from({length:n},(x,index)=>(index));
})<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<button>
Array length
<input type="number" ng-model="count"
ng-change="telephones.length=count">
</button>
<ol>
<li ng-repeat="n in [] | range:count">
<input name="telephone-{{$index}}"
ng-model="telephones[$index].value" >
</li>
</ol>
{{telephones}}
</body>언급URL : https://stackoverflow.com/questions/21631700/how-to-create-an-array-with-angularjss-ng-model
반응형
'source' 카테고리의 다른 글
| WooCommerce에서 결제 직후 주문 상태 변경 (0) | 2023.02.26 |
|---|---|
| Angular에서 'true'를 변환하고 'element'를 변환하는 경우 (0) | 2023.02.26 |
| angularjs 이외의 웹사이트에서 어떻게 Extractor를 사용하는가? (0) | 2023.02.26 |
| Spring Boot에서 Logback이 기본 로깅 프레임워크인 이유는 무엇입니까? (0) | 2023.02.26 |
| React Native의 어레이 맵 함수에서 동적으로 콘텐츠 렌더링 (0) | 2023.02.26 |