單擊一個ng-repeat中的項目以填充另一個列表

我有一個工作plunker，您可以從下拉菜單中選擇一個項目並顯示數據。我希望能夠點擊其中的一個項目並填寫下面的其他列表。與其他數據。我知道ng-click，這就是我目前使用的彈出一個警報與我想要在列表中的數據。單擊一個ng-repeat中的項目以填充另一個列表

這是有問題的部分：

<div> 
    <select ng-options="post as post.id for post in allPosts" ng-model="selectPost" ng-change="select()"> 
     <option value="">--select--</option> 
    </select> 
    <input type="text" ng-model="searchText" ng-change="search()" /> 
    <ul> 
     <li data-ng-repeat="item in records | orderBy:'email':reverse" ng-click="moreInfo(item)"> 
     {{item.email}} 
     </li> 
    </ul> 
    </div>

理想我想喜歡在彈出類似的列表：

Email: 'email...' 
Name: 'name...' 
Body: 'body...'

喜歡在彈出，但顯示出來低於從選擇下拉列表中顯示的事物列表。（在我的網頁上，它將會在右邊，所以我不關心格式化，只是怎麼做）。但我不要如果我不點擊一個選項，想要顯示列表。

Plunker here.

編輯：我開始想，也許一個ng-show會做的伎倆以某種方式，但是，我仍然不知道我怎麼會通過數據到列表。

來源

2015-04-23 erp

創建div這當message變量可用時將會顯示。

<div ng-show="message"> 
    {{ message }} 
</div>

，並在你的控制器，分配內容的moreInfo到$scope.message：

$scope.moreInfo = function(id) { 
    $scope.message = "Email: " + id.email + "\nName: " + id.name + "\nBody: " + id.body; 
};

這裏有一個更新的plunker。

來源

2015-04-23 13:06:14 cch

好吧，你提供了一個運動員，我喜歡它最好的，所以現在你贏了！：）謝啦。 – erp

沒問題，很高興我能幫到你！ – cch

我編輯你的plunker，希望這是你想要的東西..它是更好地爲你使用controller as語法article，你應該looki到風格指南過我喜歡這個由約翰·帕帕styleguide

來源

2015-04-23 13:02:16

考慮發佈一些您更改的代碼，說明需要做些什麼才能使其發揮作用。 – JimmyBoh

是的，你是對的下一次我會做:-) –

這其實很簡單：

首先，設置你的新文本的範圍值上點擊：

$scope.moreInfo = function(id) { 
    $scope.curResults = "Email: " + id.email + "\nName: " + id.name + "\nBody: " + id.body 
    //alert("Email: " + id.email + "\nName: " + id.name + "\nBody: " + id.body); 
};

然後，只需將該值賦給另一個DIV：

<div ng-show="curResults">{{curResults}}</div>

然後，只要您點擊結果，curResults就會更新並顯示在該div中。

ng-show="curResults"確保div僅在值設置爲curResults時顯示。

來源

2015-04-23 13:07:26 Huey

單擊一個ng-repeat中的項目以填充另一個列表

回答

相關問題