คำถามติดแท็ก angularjs-ng-repeat

คำสั่ง "ngRepeat" สร้างอินสแตนซ์เทมเพลตหนึ่งครั้งต่อรายการจากคอลเล็กชัน อินสแตนซ์เทมเพลตแต่ละรายการมีขอบเขตของตัวเองโดยที่ตัวแปรลูปที่กำหนดจะถูกตั้งค่าเป็นรายการคอลเลกชันปัจจุบันและ "$ index" ถูกตั้งค่าเป็นดัชนีหรือคีย์รายการ

16
วิธีสร้าง ng-repeat กรองผลลัพธ์ที่ซ้ำกัน
ฉันใช้งานง่าย ng-repeatบนไฟล์ JSON และต้องการรับชื่อหมวดหมู่ มีวัตถุประมาณ 100 รายการแต่ละประเภทอยู่ในหมวดหมู่ - แต่มีเพียง 6 หมวดหมู่เท่านั้น รหัสปัจจุบันของฉันคือ: <select ng-model="orderProp" > <option ng-repeat="place in places" value="{{place.category}}">{{place.category}}</option> </select> ผลลัพธ์คือ 100 ตัวเลือกที่แตกต่างกันส่วนใหญ่ซ้ำกัน ฉันจะใช้ Angular เพื่อตรวจสอบว่า a{{place.category}}อยู่แล้วและไม่สร้างตัวเลือกหากมีอยู่แล้ว แก้ไข: ในจาวาสคริปต์ของฉัน$scope.places = JSON dataเพียงเพื่อชี้แจง
6
AngularJS - วิธีรับการอ้างอิงผลลัพธ์ที่กรองด้วย ngRepeat
ฉันใช้คำสั่ง ng-repeat กับตัวกรองดังนี้: ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4" และฉันสามารถเห็นผลลัพธ์ที่แสดงได้ดี ตอนนี้ฉันต้องการเรียกใช้ตรรกะบางอย่างกับผลลัพธ์นั้นในคอนโทรลเลอร์ของฉัน คำถามคือฉันจะคว้าการอ้างอิงรายการผลลัพธ์ได้อย่างไร ปรับปรุง: เพื่อชี้แจง: ฉันกำลังพยายามสร้างการเติมข้อความอัตโนมัติฉันมีข้อมูลนี้: <input id="queryInput" ng-model="query" type="text" size="30" placeholder="Enter query"> จากนั้นผลการกรอง: <ul> <li ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4">{{item.name}}</li> </ul> ตอนนี้ฉันต้องการนำทางผลลัพธ์และเลือกหนึ่งในรายการ
21
วิธีแยกข้อมูล ng-repeat ด้วยสามคอลัมน์โดยใช้ bootstrap
ฉันใช้ ng-repeat กับรหัสของฉันฉันมีกล่องข้อความจำนวน 'n' ตาม ng-repeat ฉันต้องการจัดแนวกล่องข้อความด้วยสามคอลัมน์ นี่คือรหัสของฉัน <div class="control-group" ng-repeat="oneExt in configAddr.ext"> {{$index+1}}. <input type="text" name="macAdr{{$index+1}}" id="macAddress" ng-model="oneExt.newValue" value=""/> </div>
4
Angular ng-change delay
ฉันมีอินพุตที่กรองรายการ ng-repeat เกี่ยวกับการเปลี่ยนแปลง การทำซ้ำมีข้อมูลจำนวนมากและใช้เวลาสองสามวินาทีในการกรองทุกอย่าง ฉันต้องการให้พวกเขาหน่วงเวลา 0.5 วินาทีก่อนที่ฉันจะเริ่มกระบวนการกรอง อะไรคือวิธีที่ถูกต้องในเชิงมุมในการสร้างความล่าช้านี้? อินพุต <input ng-model="xyz" ng-change="FilterByName()" /> ทำซ้ำ <div ng-repeat"foo in bar"> <p>{{foo.bar}}</p> </div> ฟังก์ชั่นตัวกรอง $scope.FilterByName = function () { //Filtering Stuff Here }); ขอบคุณ
8
ความยากของ ng-model, ng-repeat และ inputs
ฉันพยายามที่จะช่วยให้ผู้ใช้สามารถแก้ไขรายชื่อของรายการโดยใช้และngRepeat ngModel( ดูซอนี้) อย่างไรก็ตามทั้งสองวิธีที่ฉันได้พยายามนำไปสู่พฤติกรรมที่แปลกประหลาด: วิธีหนึ่งไม่อัปเดตโมเดลและอีกวิธีหนึ่งจะเบลอแบบฟอร์มในแต่ละคีย์ดาวน์ ฉันทำอะไรผิดที่นี่? นี่ไม่ใช่กรณีการใช้งานที่รองรับหรือไม่? นี่คือรหัสจากซอคัดลอกเพื่อความสะดวก: <html ng-app> <head> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body ng-init="names = ['Sam', 'Harry', 'Sally']"> <h1>Fun with Fields and ngModel</h1> <p>names: {{names}}</p> <h3>Binding to each element directly:</h3> <div ng-repeat="name in names"> Value: {{name}} <input ng-model="name"> </div> <p class="muted">The binding does not appear to be …
18
Angular ng-repeat เพิ่มแถว bootstrap ทุกๆ 3 หรือ 4 cols
ฉันกำลังมองหารูปแบบที่ถูกต้องในการฉีดคลาสแถว bootstrap ทุกๆ 3 คอลัมน์ ฉันต้องการสิ่งนี้เพราะ cols ไม่มีความสูงคงที่ (และฉันไม่ต้องการแก้ไข) ดังนั้นมันจึงทำให้การออกแบบของฉันแตก! นี่คือรหัสของฉัน: <div ng-repeat="product in products"> <div ng-if="$index % 3 == 0" class="row"> <div class="col-sm-4" > ... </div> </div> </div> แต่จะแสดงเพียงหนึ่งผลิตภัณฑ์ในแต่ละแถว สิ่งที่ฉันต้องการผลลัพธ์สุดท้ายคือ: <div class="row"> <div class="col-sm4"> ... </div> <div class="col-sm4"> ... </div> <div class="col-sm4"> ... </div> </div> <div class="row"> <div class="col-sm4"> …
5
Angularjs if-then-else การสร้างในนิพจน์
ฉันสามารถใช้ if-then-else construction (ternary-operator) ในนิพจน์ angularjs ได้หรือไม่เช่นฉันมี function $ scope.isExists (item) ที่ต้องส่งคืนค่าบูล ฉันต้องการอะไรแบบนี้ <div ng-repeater="item in items"> <div>{{item.description}}</div> <div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div> </div> ฉันรู้ว่าฉันสามารถใช้ฟังก์ชันที่ส่งคืนสตริงได้ฉันสนใจที่จะใช้โครงสร้าง if-then-else ในนิพจน์ ขอบคุณ.
19
การคำนวณผลรวมขององค์ประกอบที่ซ้ำใน AngularJS ng-repeat
ng-repeatสคริปต์ด้านล่างแสดงรถเข็นร้านใช้ สำหรับแต่ละองค์ประกอบในอาร์เรย์จะแสดงชื่อรายการจำนวนและผลรวมย่อย ( product.price * product.quantity) วิธีที่ง่ายที่สุดในการคำนวณราคารวมขององค์ประกอบซ้ำคืออะไร? <table> <tr> <th>Product</th> <th>Quantity</th> <th>Price</th> </tr> <tr ng-repeat="product in cart.products"> <td>{{product.name}}</td> <td>{{product.quantity}}</td> <td>{{product.price * product.quantity}} €</td> </tr> <tr> <td></td> <td>Total :</td> <td></td> <!-- Here is the total value of my cart --> </tr> </table>
3
ทำความเข้าใจกับนิพจน์ 'track by' ของ ngRepeat
ฉันมีปัญหาในการทำความเข้าใจว่าแทร็กโดยการแสดงออกของ ng-repeat ใน angularjs ทำงานอย่างไร เอกสารประกอบหายากมาก: http://docs.angularjs.org/api/ng/directive/ngRepeat คุณสามารถอธิบายสิ่งที่แตกต่างระหว่างทั้งสองตัวอย่างของรหัสที่อยู่ในแง่ของdatabindingและด้านอื่น ๆ ที่เกี่ยวข้อง? กับ: track by $index <!--names is an array--> <div ng-repeat="(key, value) in names track by $index"> <input ng-model="value[key]"> </div> ไม่มี (เอาต์พุตเดียวกัน) <!--names is an array--> <div ng-repeat="(key, value) in names"> <input ng-model="value[key]"> </div>
5
AngularJS: รายการ ng-repeat ไม่ได้รับการอัพเดตเมื่อองค์ประกอบโมเดลถูกต่อจากอาร์เรย์แบบจำลอง
ฉันมีคอนโทรลเลอร์สองตัวและแชร์ข้อมูลระหว่างกันด้วยฟังก์ชัน app.factory คอนโทรลเลอร์ตัวแรกจะเพิ่มวิดเจ็ตในโมเดลอาร์เรย์ (pluginsDisplayed) เมื่อมีการคลิกลิงก์ วิดเจ็ตถูกผลักเข้าไปในอาร์เรย์และการเปลี่ยนแปลงนี้จะสะท้อนให้เห็นในมุมมอง (ซึ่งใช้ ng-repeat เพื่อแสดงเนื้อหาอาร์เรย์): <div ng-repeat="pluginD in pluginsDisplayed"> <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div> </div> วิดเจ็ตสร้างขึ้นจากคำสั่งสามคำสั่ง k2plugin ลบและปรับขนาด คำสั่งการลบจะเพิ่มช่วงให้กับเทมเพลตของคำสั่ง k2plugin Array.splice()เมื่อกล่าวว่าช่วงที่มีการคลิกองค์ประกอบที่เหมาะสมลงในอาร์เรย์ที่ใช้ร่วมกันจะถูกลบออกด้วย อาร์เรย์ที่ใช้ร่วมกันได้รับการอัปเดตอย่างถูกต้อง แต่การเปลี่ยนแปลงจะไม่ปรากฏในมุมมอง อย่างไรก็ตามเมื่อเพิ่มองค์ประกอบอื่นหลังจากการลบมุมมองจะได้รับการรีเฟรชอย่างถูกต้องและองค์ประกอบที่ลบไปก่อนหน้านี้จะไม่แสดง ฉันผิดอะไร คุณช่วยอธิบายฉันได้ไหมว่าทำไมถึงใช้ไม่ได้? มีวิธีที่ดีกว่าในการทำสิ่งที่ฉันพยายามทำกับ AngularJS หรือไม่? นี่คือ index.html ของฉัน: <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"> </script> <script src="main.js"></script> </head> <body> <div ng-app="livePlugins"> <div ng-controller="pluginlistctrl"> …
2
แสดง div ที่ซ่อนอยู่ใน ng-click ภายใน ng-repeat
ฉันกำลังทำงานกับแอพ Angular.js ที่กรองกระบวนการทางการแพทย์ผ่านไฟล์ json ฉันต้องการแสดงรายละเอียดของแต่ละขั้นตอนเมื่อคลิกชื่อของโพรซีเดอร์ (ในหน้าเดียวกัน) โดยใช้ ng-click นี่คือสิ่งที่ฉันมีจนถึงตอนนี้โดยตั้งค่า div .procedure-details ให้แสดง: none: <ul class="procedures"> <li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp"> <h4><a href="#" ng-click="?">{{procedure.definition}}</a></h4> <div class="procedure-details"> <p>Number of patient discharges: {{procedure.discharges}}</p> <p>Average amount covered by Medicare: {{procedure.covered}}</p> <p>Average total payments: {{procedure.payments}}</p> </div> </li> </ul> ฉันค่อนข้างใหม่ที่เชิงมุม ข้อเสนอแนะใด ๆ ?
2
Directive แยกขอบเขตด้วยขอบเขต ng-repeat ใน AngularJS
ฉันมีคำสั่งที่มีขอบเขตแยก (เพื่อให้ฉันสามารถใช้คำสั่งซ้ำในที่อื่น ๆ ได้) และเมื่อฉันใช้คำสั่งนี้กับ an ng-repeatมันก็ไม่ทำงาน ฉันได้อ่านเอกสารประกอบและคำตอบของ Stack Overflow ทั้งหมดในหัวข้อนี้และเข้าใจปัญหา ฉันเชื่อว่าฉันได้หลีกเลี่ยง gotcha ปกติทั้งหมด ดังนั้นฉันจึงเข้าใจว่ารหัสของฉันล้มเหลวเนื่องจากขอบเขตที่สร้างขึ้นโดยng-repeatคำสั่ง คำสั่งของฉันสร้างขอบเขตแยกและทำการผูกข้อมูลสองทางกับวัตถุในขอบเขตหลัก คำสั่งของฉันจะกำหนดค่าออบเจ็กต์ใหม่ให้กับตัวแปรที่ถูกผูกไว้นี้และจะทำงานได้อย่างสมบูรณ์เมื่อใช้คำสั่งของฉันโดยไม่มีng-repeat(ตัวแปรหลักได้รับการอัปเดตอย่างถูกต้อง) อย่างไรก็ตามng-repeatการกำหนดจะสร้างตัวแปรใหม่ในng-repeatขอบเขตและตัวแปรหลักไม่เห็นการเปลี่ยนแปลง ทั้งหมดนี้เป็นไปตามที่คาดไว้ตามสิ่งที่ฉันได้อ่าน ฉันยังได้อ่านว่าเมื่อมีคำสั่งหลายคำสั่งในองค์ประกอบหนึ่ง ๆ จะมีการสร้างขอบเขตเดียว และpriorityสามารถตั้งค่าa ในแต่ละคำสั่งเพื่อกำหนดลำดับที่จะนำคำสั่งไปใช้ คำสั่งจะเรียงลำดับตามลำดับความสำคัญจากนั้นจึงเรียกฟังก์ชันคอมไพล์ (ค้นหาลำดับความสำคัญของคำที่http://docs.angularjs.org/guide/directive ) ดังนั้นฉันหวังว่าฉันจะสามารถใช้ลำดับความสำคัญเพื่อให้แน่ใจว่าคำสั่งของฉันทำงานก่อนและจบลงด้วยการสร้างขอบเขตแยกและเมื่อng-repeatรันมันจะใช้ขอบเขตแยกซ้ำแทนการสร้างขอบเขตที่สืบทอดต้นแบบมาจากขอบเขตหลัก เอกสารระบุว่าที่วิ่งสั่งที่ระดับความสำคัญng-repeat 1000ไม่ชัดเจนว่า1เป็นระดับความสำคัญสูงกว่าหรือระดับความสำคัญต่ำกว่า เมื่อผมใช้ระดับความสำคัญในคำสั่งของฉันมันไม่ได้สร้างความแตกต่างดังนั้นฉันพยายาม1 2000แต่นั่นทำให้สิ่งต่าง ๆ แย่ลง: การผูกสองทางundefinedของฉันกลายเป็นและคำสั่งของฉันไม่แสดงอะไรเลย ผมได้สร้างไวโอลินเพื่อแสดงให้เห็นปัญหาของฉัน ฉันได้แสดงความคิดเห็นเกี่ยวกับpriorityการตั้งค่าในคำสั่งของฉัน ฉันมีรายการชื่อออบเจ็กต์และคำสั่งที่เรียกname-rowซึ่งแสดงฟิลด์ชื่อและนามสกุลในออบเจ็กต์ชื่อ เมื่อชื่อที่ปรากฏถูกคลิกฉันต้องการให้ตั้งค่าselectedตัวแปรในขอบเขตหลัก อาร์เรย์ของชื่อselectedตัวแปรจะถูกส่งผ่านไปยังname-rowคำสั่งโดยใช้การผูกข้อมูลสองทาง ฉันรู้วิธีทำให้สิ่งนี้ทำงานได้โดยเรียกใช้ฟังก์ชันในขอบเขตหลัก ฉันยังรู้ด้วยว่าถ้าselectedอยู่ในวัตถุอื่นและฉันผูกกับวัตถุภายนอกสิ่งต่างๆก็จะใช้ได้ แต่ฉันไม่สนใจวิธีแก้ปัญหาเหล่านั้นในขณะนี้ แต่คำถามที่ฉันมีคือ: ฉันจะป้องกันไม่ให้ng-repeatสร้างขอบเขตที่สืบทอดต้นแบบจากขอบเขตหลักและใช้ขอบเขตแยกของคำสั่งแทนได้อย่างไร เหตุใดระดับความสำคัญ2000ในคำสั่งของฉันจึงไม่ทำงาน การใช้ Batarang สามารถทราบได้หรือไม่ว่าใช้ขอบเขตประเภทใด?
3
AngularJS ตัวกรองหลายตัวพร้อมฟังก์ชันตัวกรองที่กำหนดเอง
ฉันกำลังพยายามกรองรายการด้วยตัวกรองหลายตัว + ด้วยฟังก์ชันตัวกรองที่กำหนดเอง ตัวอย่าง jsfiddle ที่ใช้งานได้ดั้งเดิมคือhttp://jsfiddle.net/ed9A2/1/แต่ตอนนี้ฉันต้องการเปลี่ยนวิธีการกรองอายุ ฉันต้องการเพิ่มตัวกรองที่กำหนดเองเพื่อให้อายุของมันกรองตามค่าอินพุตสองค่าซึ่งคือmin_ageและmax_age (ระหว่างอายุ) หลังจากดูใน doc. ฉันพบว่ามีคนที่มีคำถามคล้าย ๆ กันและผู้ใช้ Mark Rajcok ตอบhttp://docs.angularjs.org/api/ng.filter:filter#comment-648569667ดูดีและน่าจะใช้งานได้ แต่ฉันมีปัญหาในการนำไปใช้กับรหัสของฉันซึ่งส่วนใหญ่ดูเหมือนจะเป็นเพราะฉันมีตัวกรองอื่น ๆ ฉันใหม่มากกับ AngularJS :( ซอลองและไม่ทำงานของฉันอยู่ที่นี่http://jsfiddle.net/ed9A2/20/ สำเนาวางรหัสที่ไม่ทำงานของฉันอยู่ที่นี่ ดู <div ng-app ng-controller="MainController"> <table class="fancyTable"> <tr> <th>Player id</th> <th>Player name</th> <th>Age</th> </tr> <tr> <td><input ng-model="player_id" /></td> <td><input ng-model="player_name" /></td> <td> Min Age:<input ng-model="min_age" /> Max Age:<input …
3
angular ng-repeat ข้ามรายการหากตรงกับนิพจน์
ฉันกำลังมองหาวิธีที่จะบอกพื้นเชิงมุมที่จะข้ามรายการใน ng ซ้ำว่าตรงกับการแสดงออกโดยทั่วไปcontinue; ในตัวควบคุม: $scope.players = [{ name_key:'FirstPerson', first_name:'First', last_name:'Person' }, { name_key:'SecondPerson', first_name:'Second', last_name:'Person' }] name_key='FirstPerson'ตอนนี้ในแม่แบบของฉันฉันต้องการที่จะแสดงให้ทุกคนที่ไม่ตรงกับ ฉันคิดว่ามันต้องเป็นตัวกรองดังนั้นฉันจึงตั้งค่า Plunkr เพื่อเล่นกับมัน แต่ไม่มีโชคเลย Plunkr พยายาม
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.