AngularJS의 ng-model을 사용하여 배열을 만드는 방법
전화기를 들고있는 배열을 만들려고합니다.이 코드가 있습니다.
<input type="text" ng-model="telephone[0]" />
<input type="text" ng-model="telephone[1]" />
하지만 $ scope.telephone에 액세스 할 수 없습니다.
우선 첫 번째입니다. $scope.telephone보기에서 사용을 시작하기 전에 컨트롤러에서 배열 로 정의해야합니다 .
$scope.telephone = [];
새 입력을 추가 할 때 인식되지 않는 ng-model 문제를 해결하려면 작동하려면 $compileAngular 서비스 를 사용해야합니다 .
$ 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/
내 자바 스크립트 :
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>
그런 다음 사용자가 제출을 클릭하면 submitNumber ()를 실행하여 새 전화 번호를 numbers 배열로 푸시합니다.
$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
'Program Club' 카테고리의 다른 글
| Visual Studio에서 새 TypeScript 프로젝트 만들기 (0) | 2020.12.12 |
|---|---|
| 웹 소켓을 통한 ReST가 가능합니까? (0) | 2020.12.12 |
| 여러 프로젝트에서 단일 라이브러리 소스를 공유하는 방법 (0) | 2020.12.12 |
| Java 클래스 파일이 예약 된 키워드를 이름으로 사용할 수 있습니까? (0) | 2020.12.12 |
| WinDbg에서 긴 작업을 어떻게 중단 할 수 있습니까? (0) | 2020.12.12 |