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

ใช้สำหรับคำถามเกี่ยวกับ AngularJS (1.x), เฟรมเวิร์ก JavaScript แบบโอเพ่นซอร์ส อย่าใช้แท็กนี้สำหรับ Angular 2 หรือใหม่กว่า; ใช้แท็ก [angular] แทน

5
AngularJS ng-click stopPropagation
ฉันได้คลิกกิจกรรมบนแถวของตารางและในแถวนี้ยังมีปุ่มลบพร้อมคลิกกิจกรรม เมื่อฉันคลิกที่ปุ่มลบการคลิกที่เหตุการณ์ในแถวนั้นจะเริ่มขึ้น นี่คือรหัสของฉัน <tbody> <tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)"> <td>{{user.firstname}}</td> <td>{{user.lastname}}</td> <td>{{user.email}}</td> <td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td> </tr> </tbody> ฉันจะป้องกันไม่ให้showUserเหตุการณ์ถูกไล่ออกเมื่อฉันคลิกปุ่มลบในเซลล์ตารางได้อย่างไร

12
ความแตกต่างระหว่าง ng-if และ ng-show / ng-hide คืออะไร
ฉันพยายามเข้าใจความแตกต่างระหว่างng-ifและng-show/ ng-hideแต่พวกเขาดูเหมือนฉัน มีความแตกต่างที่ฉันควรจำไว้ว่าเลือกใช้อย่างใดอย่างหนึ่งหรือไม่

26
วิธีการ ng-repeat จำนวนครั้งที่กำหนดแทนการทำซ้ำในอาร์เรย์?
มีวิธีในการ ng-repeatการจำนวนครั้งที่กำหนดแทนที่จะต้องย้ำมากกว่าอาร์เรย์? ตัวอย่างเช่นด้านล่างฉันต้องการให้รายการแสดงขึ้น 5 เท่าโดยสมมติว่า$scope.numberเท่ากับ 5 นอกจากนี้การเพิ่มจำนวนดังนั้นแต่ละรายการจะเพิ่มขึ้นเช่น 1, 2, 3, 4, 5 ผลลัพธ์ที่ต้องการ: <ul> <li><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> <li><span>4</span></li> <li><span>5</span></li> </ul>

21
AngularJS: วิธีดูตัวแปรบริการ
ฉันมีบริการพูดว่า: factory('aService', ['$rootScope', '$resource', function ($rootScope, $resource) { var service = { foo: [] }; return service; }]); และฉันต้องการใช้fooเพื่อควบคุมรายการที่แสดงผลเป็น HTML: <div ng-controller="FooCtrl"> <div ng-repeat="item in foo">{{ item }}</div> </div> เพื่อให้ตัวควบคุมตรวจสอบเมื่อaService.fooมีการปรับปรุงฉันได้ cobbled ร่วมกันรูปแบบนี้ที่ฉันเพิ่มบริการไปยังตัวควบคุม$scopeแล้วใช้$scope.$watch(): function FooCtrl($scope, aService) { $scope.aService = aService; $scope.foo = aService.foo; $scope.$watch('aService.foo', function (newVal, oldVal, scope) { if(newVal) { …

22
วิธีการเปลี่ยนส่วนหัวแบบไดนามิกตามมุมมองบางส่วนของ AngularJS ได้อย่างไร
ฉันใช้มุมมอง ng เพื่อรวมมุมมองบางส่วนของ AngularJS และฉันต้องการอัปเดตชื่อหน้าและแท็กส่วนหัว h1 ตามมุมมองที่รวมไว้ แม้ว่าสิ่งเหล่านี้จะอยู่นอกขอบเขตของคอนโทรลเลอร์มุมมองบางส่วนและดังนั้นฉันจึงไม่สามารถหาวิธีผูกเข้ากับชุดข้อมูลในคอนโทรลเลอร์ได้ ถ้าเป็น ASP.NET MVC คุณสามารถใช้ @ViewBag เพื่อทำสิ่งนี้ได้ แต่ฉันไม่รู้ว่าเทียบเท่าใน AngularJS ฉันค้นหาเกี่ยวกับบริการที่แชร์เหตุการณ์ ฯลฯ แต่ยังไม่สามารถใช้งานได้ วิธีใดที่จะแก้ไขตัวอย่างของฉันดังนั้นมันจะได้ผลมาก HTML ของฉัน: <html data-ng-app="myModule"> <head> <!-- include js files --> <title><!-- should changed when ng-view changes --></title> </head> <body> <h1><!-- should changed when ng-view changes --></h1> <div data-ng-view></div> </body> </html> …

19
จะใช้เหตุการณ์การกดคีย์ใน AngularJS ได้อย่างไร
ฉันต้องการจับกิจกรรมการกดปุ่มบนกล่องข้อความด้านล่าง เพื่อให้ชัดเจนยิ่งขึ้นฉันใช้ a ng-repeatเพื่อเติม tbody นี่คือ HTML: <td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield" data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td> นี่คือโมดูลของฉัน: angular.module('components', ['ngResource']); ฉันกำลังใช้ทรัพยากรเพื่อเติมข้อมูลตารางและรหัสคอนโทรลเลอร์ของฉันคือ: function Ajaxy($scope, $resource) { //controller which has resource to populate the table }

12
AngularJS: ทำไม ng-bind จึงดีกว่า {{}} เป็นมุม?
ฉันเป็นหนึ่งในการนำเสนอเชิงมุมและหนึ่งในบุคคลที่กล่าวถึงการประชุมng-bindดีกว่า{{}}มีผลผูกพัน เหตุผลข้อหนึ่งng-bindวางตัวแปรไว้ในรายการเฝ้าดูและเมื่อมีแบบจำลองที่เปลี่ยนแปลงข้อมูลที่ถูกผลักเพื่อดูในอีกทางหนึ่ง{{}}จะทำการสอดแทรกนิพจน์ทุกครั้ง (ฉันเดาว่ามันคือวงจรเชิงมุม) และกด ค่าแม้ว่าค่าจะเปลี่ยนแปลงหรือไม่ นอกจากนี้ยังมีการกล่าวว่าหากคุณมีข้อมูลไม่มากในหน้าจอคุณสามารถใช้งานได้{{}}และปัญหาด้านประสิทธิภาพจะไม่ปรากฏให้เห็น มีใครบ้างที่จะให้ความกระจ่างในเรื่องนี้กับฉันได้ไหม

8
ไวยากรณ์ที่ถูกต้องของ ng-include คืออะไร?
ฉันพยายามที่จะรวมตัวอย่าง HTML ภายในng-repeatแต่ฉันไม่สามารถรวมถึงการทำงาน ดูเหมือนว่าไวยากรณ์ปัจจุบันของng-includeจะแตกต่างจากก่อนหน้านี้: ฉันเห็นตัวอย่างมากมายที่ใช้ <div ng-include src="path/file.html"></div> แต่ในเอกสารอย่างเป็นทางการมันบอกว่าจะใช้ <div ng-include="path/file.html"></div> แต่จากนั้นลงหน้ามันจะแสดงเป็น <div ng-include src="path/file.html"></div> ไม่ว่าฉันจะพยายาม <div ng-include="views/sidepanel.html"></div> <div ng-include src="views/sidepanel.html"></div> <ng-include src="views/sidepanel.html"></ng-include> <ng-include="views/sidepanel.html"></ng-include> <ng:include src="views/sidepanel.html"></ng:include> ตัวอย่างของฉันไม่ได้เป็นโค้ดมากนัก แต่ก็มีหลายอย่างเกิดขึ้น ฉันอ่านในโหลดเทมเพลตแบบไดนามิกภายในng-repeatที่อาจทำให้เกิดปัญหาดังนั้นฉันแทนที่เนื้อหาsidepanel.htmlด้วยคำเพียง แต่fooยังคงไม่มีอะไร ฉันพยายามประกาศแม่แบบโดยตรงในหน้านี้: <script type="text/ng-template" id="tmpl"> foo </script> และทำงานผ่านทุกรูปแบบของng-includeการอ้างอิงของสคริปต์idและยังคงไม่มีอะไร หน้าของฉันมีมากขึ้นในนั้น แต่ตอนนี้ฉันได้ถอดมันลงไปเพียงแค่นี้: <!-- index.html --> <html> <head> <!-- angular includes --> </head> <body …

4
ฉันจะทดสอบบริการ AngularJS จากคอนโซลได้อย่างไร
ฉันมีบริการเช่น: angular.module('app').factory('ExampleService', function(){ this.f1 = function(world){ return 'Hello '+world; } return this; }) ฉันต้องการทดสอบจากคอนโซล JavaScriptและเรียกใช้ฟังก์ชันf1()ของบริการ ฉันจะทำสิ่งนั้นได้อย่างไร

4
ความแตกต่างระหว่างฟังก์ชั่น 'คอนโทรลเลอร์', 'ลิงค์' และ 'คอมไพล์' เมื่อกำหนดไดเรกทีฟ
บางแห่งดูเหมือนว่าจะใช้ฟังก์ชั่นควบคุมสำหรับตรรกะคำสั่งและอื่น ๆ ใช้ลิงค์ ตัวอย่างแท็บบนโฮมเพจเชิงมุมใช้คอนโทรลเลอร์สำหรับหนึ่งและลิงก์สำหรับคำสั่งอื่น ความแตกต่างระหว่างสองคืออะไร?

6
AngularJS แตกต่างจาก jQuery อย่างไร
ฉันเพียงรู้ห้องสมุด js หนึ่งและนั่นคือjQuery แต่ตัวแปลงสัญญาณอื่นของฉันในกลุ่มกำลังเปลี่ยนAngularJSเป็นไลบรารีเริ่มต้นในโครงการใหม่ ฉันไม่รู้อะไรเลยเกี่ยวกับเรื่องนี้ มันแตกต่างจาก jQuery อย่างไร ฉันมีชุดฟังก์ชั่นสำหรับงานที่คล้ายกันใน jQuery เรียบร้อยแล้ว ฉันยังสามารถใช้ jQuery กับ AngularJS ได้ไหม

7
ดูเหมือนว่าการเพิ่มพารามิเตอร์ให้กับฟังก์ชัน ng-click ภายใน ng-repeat นั้นไม่ทำงาน
ฉันมีห่วงง่าย ๆng-repeatเช่นนี้: <li ng-repeat='task in tasks'> <p> {{task.name}} <button ng-click="removeTask({{task.id}})">remove</button> </li> $scope.removeTask(taskID)มีฟังก์ชั่นในการควบคุมคือ เท่าที่ฉันทราบ Angular จะแสดงมุมมองและแทนที่การประมาณ{{task.id}}ด้วยตัวเลขจากนั้นเมื่อคลิกเหตุการณ์จะประเมินng-clickสตริง ในกรณีนี้ng-clickจะได้รับสิ่งที่คาดหวังทั้งหมดเช่น: ng-click="removeTask(5)".อย่างไรก็ตาม ... มันไม่ได้ทำอะไรเลย แน่นอนฉันสามารถเขียนโค้ดเพื่อรับtask.idจาก$tasksอาเรย์หรือแม้แต่ DOM แต่นี่ดูเหมือนจะไม่เหมือนวิธีแองกูลาร์ ดังนั้นวิธีหนึ่งสามารถเพิ่มเนื้อหาแบบไดนามิกในng-clickคำสั่งภายในng-repeatวง?

9
ขอบเขตหลักเข้าถึง AngularJS จากตัวควบคุมลูก
ฉันตั้งค่าตัวควบคุมโดยใช้ data-ng-controller="xyzController as vm" ฉันมีสถานการณ์ที่มีตัวควบคุมซ้อนกันของพ่อแม่ / ลูก ฉันไม่มีปัญหาในการเข้าถึงคุณสมบัติหลักใน HTML ที่ซ้อนกันโดยใช้$parent.vm.propertyแต่ฉันไม่สามารถหาวิธีเข้าถึงคุณสมบัติหลักได้จากภายในตัวควบคุมลูกของฉัน ฉันลองฉีด $ scope แล้วใช้$scope.$parent.vm.propertyแต่มันไม่ทำงานเหรอ ใครสามารถให้คำแนะนำได้บ้าง

8
orderBy หลายสาขาในเชิงมุม
วิธีการจัดเรียงโดยใช้หลายฟิลด์ในเวลาเดียวกันเป็นมุม? กำปั้นตามกลุ่มแล้วโดยกลุ่มย่อยสำหรับตัวอย่าง $scope.divisions = [{'group':1,'sub':1}, {'group':2,'sub':10}, {'group':1,'sub':2},{'group':1,'sub':20},{'group':2,'sub':1}, {'group':2,'sub':11}]; ฉันต้องการแสดงสิ่งนี้เป็น กลุ่ม: กลุ่มย่อย 1 - 1 1 - 2 1 - 20 2 - 1 2 - 10 2 - 11 <select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:'group' | orderBy:'sub'" />

4
AngularJS: ความแตกต่างระหว่างวิธี $ observ และ $ watch
ฉันรู้ว่าทั้งสองWatchersและObserversถูกคำนวณทันทีที่มี$scopeการเปลี่ยนแปลงใน AngularJS แต่ไม่เข้าใจว่าอะไรคือความแตกต่างระหว่างสองอย่างนี้ ความเข้าใจเบื้องต้นของฉันคือการObserversคำนวณสำหรับการแสดงออกเชิงมุมซึ่งเป็นเงื่อนไขในด้าน HTML ที่Watchersดำเนินการเมื่อ$scope.$watch()มีการดำเนินการฟังก์ชั่น ฉันกำลังคิดอย่างถูกต้องหรือไม่

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.