從$ scope中獲取數據

首先，我想說我剛剛開始使用AngularJS，所以請原諒，如果這是一個愚蠢的問題。

我有一個控制器執行一個AJAX請求，它返回一個JSON對象。這個JSON然後保存爲$scope.person。它看起來是這樣的：

function PersonController($scope, $http) { 
    $http({ 
    method: 'GET', 
    url: constants.adminUrl + '/getJSON.php?data=person' 
    }).success(function(data, status, headers, config) { 
    $scope.person = data; 
    }).error(function(data, status, headers, config) { 
    throw new Error('I\'m truly sorry, but I couldn\'t fetch your data'); 
    }); 
}

文件getJSON.php成功返回我的期望，一個JSON對象，它是這樣的：

[{ 
    "id": 1, 
    "firstName": "Silvestre", 
    "lastName": "Herrera", 
    "headline": "Diseñador y front-end engineer", 
    "location": "Argentina", 
    "summary": "Summary summary summary" 
}]

，然後在我的HTML我有以下幾點：

<ol ng-controller="PersonController"> 
    <li ng-repeat="person in person | filter: {id:1}"> 
     <input data-autoGrow name="firstName" type="text" value="{{ person.firstName }}" placeholder="<?= __("What's your first name?"); ?>"><input data-autoGrow name="lastName" type="text" value="{{ person.lastName }}" placeholder="<?= __("And your last name?"); ?>"> 
    </li> 
    <li ng-repeat="person in person | filter: {id:1}"><input type="text" value="{{ person.headline }}" placeholder="<?= __("Headline"); ?>"></li> 
    <li ng-repeat="person in person | filter: {id:1}"><input type="text" value="{{ person.location }}" placeholder="<?= __("Where do you live?"); ?>"></li> 
    <li ng-repeat="person in person | filter: {id:1}"><textarea placeholder="<?= __("Write something about you..."); ?>">{{ person.summary }}</textarea></li> 
</ol>

所有的PHP函數__()確實是翻譯給定的字符串。無論如何，正如你所看到的，我正在使用ng-repeat指令，我想避免這個指令，因爲只有一個人，並且總是隻有一個。

我想一切<li>使用ng-model="person"在<ul>元素，而不是ng-repeat="person in person"，然後嘗試打印{{ person.firstName }}但沒有被打印出來。但是，如果我打印{{ person }}我確實得到了整個對象。

嗯，我想這幾乎總結了我的問題。預先感謝您的任何意見！

來源

2014-02-11 Silvestre Herrera

你就不能這樣？：

$scope.person = data[0];

來源

2014-02-11 18:25:21 karaxuna

這絕對是它的一部分。實際上這應該足以繞過對'ng-repeat'指令的需求，因爲'$ scope.person'只包含一個人對象而不是一個包含一個人對象的數組。他仍然需要正確設置輸入字段的模型綁定，否則'person'信息將不會加載到他的表單字段中，並且他的表單條目將不會保存到他的'person'模型中。 – citizenslave

是的！這就是訣竅！這和@citizenslave的答案（沒有[0]）的HTML標記。謝謝。你們兩個都是:-) –

是的，我的標記中的'[0]'和'[0]'在不同的點上做着同樣的事情。 – citizenslave

對於數組中的數組和項目，不能使用相同的變量名'person'。你的代碼應該是

$scope.people = data;

然後在HTML

<li ng-repeat="person in people | filter: {id:1}">

來源

2014-02-11 18:09:34

是的，「親自去」的人並不酷，但它的確有用。我的意思是，如果我將其改爲「我親自參與」，然後使用「{{me.firstName}}」打印數據，則結果仍然相同。但是，我想要做的就是停止使用'ng-repeat'指令並仍然能夠訪問該對象。 –

問題出在您用來「打印」數據的代碼。這不是Angular模型綁定的工作原理。 – citizenslave

@Silvestre：你停止使用ng-repeat是什麼意思？你想顯示多個人的數據還是隻顯示單個人的數據？通常ID是唯一的使用過濾器的要點是什麼？{id：1}？ –

您不使用ng-model指令，當你設置一個HTML標籤的內容。 ng-model是處理表單字段中的value屬性的有效方法。你的目的，你應該能夠這樣寫：

<ol ng-controller="PersonController"> 
    <li> 
    <input data-autogrow name='firstName' ng-model='person[0].firstName'/> 
    <input data-autogrow name='lastName' ng-model='person[0].lastName'/> 
    </li> 
    <li><input ng-model='person[0].headline'/></li> 
    <li><input ng-model='person[0].location'/></li> 
    <li><textarea ng-model='person[0].summary'/></li> 
</ol>

注意，textarea標籤實際上不是香草的HTML，它是一個AngularJS directive實現相同的功能，所以它不會以同樣的方式工作，您仍然可以綁定ng-model屬性，而不是像在vanilla HTML中那樣將其插入到內容中。

來源

2014-02-11 18:25:44 citizenslave

從$ scope中獲取數據

回答

相關問題