如何創建與AngularJS的NG-模式

Question

我試圖創建一個數組拿着電話一個數組，我有這樣的代碼

<input type="text" ng-model="telephone[0]" /> 
<input type="text" ng-model="telephone[1]" /> 

但我不能訪問$ scope.telephone

Answer 1

的第一件事是第一次。您需要在控制器中將$scope.telephone定義爲數組，然後才能在視圖中開始使用它。

$scope.telephone = []; 

爲了解決NG-模型時，您將追加一個新的輸入不被識別的問題 - 對於工作，你必須使用$compile角度的服務。

從Angular.js API reference on $compile：

編譯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

Answer 2

它對我來說工作得很好：http://jsfiddle.net/qwertynl/htb9h/

我的javascript：

var app = angular.module("myApp", []) 
app.controller("MyCtrl", ['$scope', function($scope) { 
    $scope.telephone = []; // << remember to set this 
}]); 

Answer 3

你可以做各種各樣的THI NGS。我會做的是這個。

在作用域上創建一個數組，作爲電話號碼的數據結構。

$scope.telephone = ''; 
$scope.numbers = []; 

然後在你的HTML我有這個

<input type="text" ng-model="telephone"> 
<button ng-click="submitNumber()">Submit</button> 

然後，當用戶點擊提交，運行submitNumber（），其推動新的電話號碼爲數字陣列。

$scope.submitNumber = function(){ 
    $scope.numbers.push($scope.telephone); 
} 

Answer 4

這應該有效。

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()" /> 

Example plunk here

Answer 5

一種方式看看是你的數組轉換爲一個對象，並在範圍內使用它（一個數組的模擬）。這種方式有利於維護模板。

$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]; 
}