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

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

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 พยายาม

7
AngularJS ng-repeat โดยไม่มีองค์ประกอบ html
ฉันกำลังใช้โค้ดชิ้นนี้เพื่อแสดงรายการ: <ul ng-cloak> <div ng-repeat="n in list"> <li><a href="{{ n[1] }}">{{ n[0] }}</a></li> <li class="divider"></i> </div> <li>Additional item</li> </ul> อย่างไรก็ตาม<div>องค์ประกอบดังกล่าวก่อให้เกิดข้อบกพร่องในการแสดงผลเล็กน้อยในบางเบราว์เซอร์ ฉันอยากทราบว่ามีวิธีทำ ng-repeat โดยไม่ใช้ div container หรือวิธีอื่นเพื่อให้ได้ผลเช่นเดียวกัน

3
AngularJS ฟังก์ชั่นตัวกรองที่กำหนดเอง
ภายในคอนโทรลเลอร์ของฉันฉันต้องการกรองอาร์เรย์ของวัตถุ แต่ละออบเจ็กต์เหล่านี้เป็นแผนที่ซึ่งสามารถมีสตริงและรายการได้ ฉันพยายามใช้$filter('filter')(array, function)รูปแบบ แต่ฉันไม่รู้วิธีเข้าถึงองค์ประกอบแต่ละส่วนของอาร์เรย์ภายในฟังก์ชันของฉัน นี่คือตัวอย่างข้อมูลเพื่อแสดงสิ่งที่ฉันต้องการ $filter('filter')(array, function() { return criteriaMatch(item, criteria); }); จากนั้นcriteriaMatch()ฉันจะตรวจสอบว่าคุณสมบัติแต่ละรายการตรงกันหรือไม่ var criteriaMatch = function(item, criteria) { // go thro each individual property in the item and criteria // and check if they are equal } ฉันต้องทำสิ่งเหล่านี้ทั้งหมดในคอนโทรลเลอร์และรวบรวมรายชื่อรายการและตั้งค่าไว้ในขอบเขต ดังนั้นฉันจำเป็นต้องเข้าถึง$filter('filter')ด้วยวิธีนี้เท่านั้น ตัวอย่างทั้งหมดที่ฉันพบใน net จนถึงขณะนี้มีการค้นหาเกณฑ์แบบคงที่ภายในฟังก์ชันซึ่งไม่ผ่านวัตถุเกณฑ์และทดสอบกับแต่ละรายการในอาร์เรย์

3
วิธีสร้างตัวกรอง angularjs ซึ่งส่งออก HTML
หลังจากอ่านบทช่วยสอน AngularJS ขั้นตอนที่ 9 ฉันได้สร้างตัวกรอง AngularJS ของตัวเองซึ่งควรแปลงข้อมูลบูลีนเป็น html นี่คือรหัสตัวกรองของฉัน: angular.module('phonecatFilters', []).filter('iconify', function () { // My custom filter return function (input) { return input ? '<i class="icon-ok"></i>' : '<i class="icon-remove"></i>'; } }); นี่คือรหัส HTML ของฉัน: <dt>Infrared</dt> <dd>{{phone.connectivity.infrared | iconify }}"></dd> ปัญหาคือ borwser แสดงค่าที่ส่งคืนตามตัวอักษร: <i class="icon-ok"></i> ไม่ใช่เป็นไอคอน (หรือ html ที่แสดงผล) ที่ควรปรากฏ …
91 angularjs 

9
ความแตกต่างระหว่าง $ scope และ $ rootScope
ใครช่วยอธิบายความแตกต่างระหว่าง $ scope และ $ rootScope ได้บ้าง? ฉันคิด ขอบเขต $: เราสามารถรับคุณสมบัติของ ng-model ในตัวควบคุมเฉพาะได้จากหน้าเฉพาะโดยใช้สิ่งนี้ $ rootScope เราสามารถรับคุณสมบัติ ng-model ทั้งหมดในคอนโทรลเลอร์จากหน้าใดก็ได้โดยใช้สิ่งนี้ ถูกต้องหรือไม่ หรืออย่างอื่น?

5
ฉันจะตั้งชื่อรุ่นไดนามิกใน AngularJS ได้อย่างไร?
ฉันต้องการกรอกแบบฟอร์มด้วยคำถามแบบไดนามิก (ซอที่นี่ ): <div ng-app ng-controller="QuestionController"> <ul ng-repeat="question in Questions"> <li> <div>{{question.Text}}</div> <select ng-model="Answers['{{question.Name}}']" ng-options="option for option in question.Options"> </select> </li> </ul> <a ng-click="ShowAnswers()">Submit</a> </div> ​ function QuestionController($scope) { $scope.Answers = {}; $scope.Questions = [ { "Text": "Gender?", "Name": "GenderQuestion", "Options": ["Male", "Female"]}, { "Text": "Favorite color?", "Name": "ColorQuestion", "Options": …
91 angularjs 

4
ใช้ $ http ภายในผู้ให้บริการที่กำหนดเองในการกำหนดค่าแอป angular.js
คำถามหลัก - เป็นไปได้ไหม? ฉันพยายามโดยไม่มีโชค .. app js หลัก ... var app = angular.module('myApp', ['services']); app.config(['customProvider', function (customProvider) { }]); ... ผู้ให้บริการเอง var services = angular.module('services', []); services.provider('custom', function ($http) { }); และฉันมีข้อผิดพลาดดังกล่าว: Uncaught Error: Unknown provider: $http from services ความคิดใด ๆ ? ขอบคุณ!

10
จะทดสอบได้อย่างไรว่าองค์ประกอบมีคลาสโดยใช้ไม้โปรแทรกเตอร์?
ฉันกำลังลองใช้ Protractor เพื่อทดสอบ e2e แอพ Angular และยังไม่ได้หาวิธีตรวจสอบว่าองค์ประกอบมีคลาสเฉพาะหรือไม่ ในกรณีของฉันการทดสอบคลิกที่ปุ่มส่งและตอนนี้ฉันต้องการทราบว่า form [name = "getoffer"] มีคลาส .ngDirty หรือไม่ อะไรคือแนวทางแก้ไข? describe('Contact form', function() { beforeEach(function(){ browser.get('http://localhost:9000'); element(by.linkText('Contact me')).click(); }); it('should fail form validation, all fields pristine', function() { element(by.css('.form[name="getoffer"] input[type="submit"]')).click(); expect(element(by.name('getoffer'))).toHaveClass('ngDirty'); // <-- This line }); });

8
บริการที่ไม่ใช่ Singleton ใน AngularJS
AngularJS ระบุอย่างชัดเจนในเอกสารว่า Services เป็น Singletons: AngularJS services are singletons ในทางตรงกันข้ามmodule.factoryยังส่งคืนอินสแตนซ์ Singleton ระบุว่ามีความอุดมสมบูรณ์ของกรณีการใช้งานสำหรับการให้บริการที่ไม่ใช่เดี่ยวสิ่งที่เป็นวิธีที่ดีที่สุดที่จะใช้วิธีการที่โรงงานจะกลับมากรณีของการบริการเพื่อให้แต่ละครั้งที่มีการExampleServiceพึ่งพาการประกาศก็เป็นที่พอใจโดยอินสแตนซ์ที่แตกต่างกันExampleService?

1
วิธีสร้างแผนภูมิช่วงคอลัมน์ใน Highcharts โดยใช้ฟังก์ชัน range และ navigator?
ฉันมีความต้องการที่จะพล็อตประวัติการรันของงานใน Highcharts ต้องแสดงประวัติการเรียกใช้งานเป็นแถบแนวนอน มีข้อกำหนดเพิ่มเติมที่ฉันได้เพิ่มเป็นอัปเดตด้านล่างนี้ เมื่อเร็ว ๆ นี้ฉันพบว่าinvertedตัวเลือกนั้นไม่รองรับในStockChartและมีเพียงnavigator & rangeSelector เท่านั้นที่มีอยู่ใน StockChart ดังนั้นฉันจึงใช้ฟังก์ชันเหล่านั้น ดังนั้นเพื่อให้บรรลุความต้องการฉันได้สร้างสิ่งที่คล้ายกับตัวอย่าง jsfiddle นี้ (พบที่ไหนสักแห่งในขณะที่ท่องเว็บจำแหล่งที่มาไม่ได้) และลงเอยด้วยลิงก์ plunker นี้ด้วยความช่วยเหลือจากคำถามก่อนหน้าของฉันขอบคุณPawel Fus กำลังอัปเดตคำถามเพื่อหลีกเลี่ยงความสับสน ข้อกำหนดเพิ่มเติม: แสดงเฉพาะงานที่ทำงานในช่วงวันที่และเวลาที่กำหนด ในกรณีที่มีการรันมากเกินไปเช่นมากกว่า 10 รันจำเป็นต้องมีวิธีแสดงเพียง 10 งานที่มองเห็นได้ด้วยแกน y ที่เลื่อนได้เพื่อแสดงงานอื่น ๆ plunker เชื่อมโยงไปยังปัญหา คำอธิบายปัญหาของคนดังกล่าวข้างต้น หากคุณตรวจสอบภาพด้านล่างจาก plunker ข้างต้นช่วงเวลาที่จาก12/12/2014 09:32:26ไป12/12/2014 10:32:26และมีเพียง 2 งานที่มีการเรียกใช้งานm_ARRAYV_SALES_ZIG1_CALL2_VOD__C_OB m_ZIG2_HCP_MERGE_IB_CNอย่างไรก็ตามฉันเห็นงานอื่นระหว่างLILLY_Cที่ไม่ได้ทำงานในช่วงวันที่นี้ด้วยซ้ำ (ในข้อมูลจริงมีงานมากกว่า 10 งานที่รวมแผนภูมินี้ซึ่งไม่ได้อยู่ภายใต้ช่วงเวลาวันที่นี้ด้วยซ้ำ) นอกจากนี้ถ้าคุณสังเกตเห็นที่ด้านล่างส่วนใหญ่เวลาที่มุมขวาเปลี่ยนจากการ09:38 เป็นเวลาสิ้นสุดของงาน ด้านล่างนี้คือตัวเลือกแผนภูมิของฉัน19:2019:20m_ZIG2_HCP_MERGE_IB_CN var chart_options …

19
การใช้ Bootstrap Tooltip กับ AngularJS
ฉันพยายามใช้คำแนะนำเครื่องมือ Bootstrap ในแอปของฉัน แอพของฉันใช้ AngularJS ในปัจจุบันฉันมีสิ่งต่อไปนี้: <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button> ฉันคิดว่าฉันจำเป็นต้องใช้ $("[data-toggle=tooltip]").tooltip(); อย่างไรก็ตามฉันไม่แน่ใจ แม้ว่าฉันจะเพิ่มบรรทัดด้านบน แต่รหัสของฉันก็ใช้ไม่ได้ ฉันพยายามหลีกเลี่ยงการใช้ UI bootstrap เนื่องจากมีมากกว่าที่ฉันต้องการ อย่างไรก็ตามถ้าฉันต้องใส่แค่ส่วนคำแนะนำเครื่องมือฉันก็จะเปิดให้ แต่ฉันคิดไม่ออกว่าจะทำอย่างไร ใครช่วยบอกวิธีทำให้ Bootstrap Tooltip ทำงานกับ AngularJS ได้ไหม

5
ใช้ $ window หรือ $ location เพื่อเปลี่ยนเส้นทางใน AngularJS
แอปที่ฉันใช้งานมีสถานะต่างๆ (โดยใช้ ui-router) ซึ่งบางรัฐกำหนดให้คุณต้องเข้าสู่ระบบส่วนสถานะอื่น ๆ จะเปิดเผยต่อสาธารณะ ฉันได้สร้างวิธีการที่ตรวจสอบได้อย่างถูกต้องว่าผู้ใช้เข้าสู่ระบบหรือไม่สิ่งที่ฉันกำลังมีปัญหาคือการเปลี่ยนเส้นทางไปยังหน้าการเข้าสู่ระบบของเราเมื่อจำเป็น ควรสังเกตว่าขณะนี้หน้าล็อกอินไม่ได้อยู่ในแอป AngularJS app.run(function ($rootScope, $location, $window) { $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { if (toState.data.loginReq && !$rootScope.me.loggedIn) { var landingUrl = $window.location.host + "/login"; console.log(landingUrl); $window.open(landingUrl, "_self"); } }); }); console.log แสดง url ที่ต้องการอย่างถูกต้อง บรรทัดหลังจากนั้นฉันได้ลองใช้งานจริงทุกอย่างตั้งแต่ $ window.open ไปจนถึง window.location.href และไม่ว่าฉันจะพยายามอย่างไรก็ไม่มีการเปลี่ยนเส้นทางเกิดขึ้น แก้ไข …

2
AngularJS: จะตั้งค่าตัวแปรภายในเทมเพลตได้อย่างไร?
ฉันจะหลีกเลี่ยงไม่ให้{{f = ...}}ข้อความในบรรทัดที่สามพิมพ์เนื้อหาของforecast[day.iso]? ฉันต้องการหลีกเลี่ยงการใช้forecast[day.iso].temperatureและอื่น ๆ สำหรับการทำซ้ำทุกครั้ง <div ng-repeat="day in forecast_days"> {{$index}} - {{day.iso}} - {{day.name}} {{f = forecast[day.iso]}} Temperature: {{f.temperature}}<br> Humidity: {{f.humidity}}<br> ... </div>

4
Promise พฤติกรรมทั้งหมดกับ RxJS Observables?
ใน Angular 1.x บางครั้งฉันต้องhttpส่งคำขอหลายครั้งและทำบางอย่างกับคำตอบทั้งหมด Promise.all(promises).then(function (results) {...})ฉันจะโยนสัญญาทั้งหมดในอาร์เรย์และโทร แนวทางปฏิบัติที่ดีที่สุดของ Angular 2 ดูเหมือนจะชี้ไปที่การใช้ RxJS Observableเพื่อทดแทนสัญญาในhttpคำขอ หากฉันมี Observables ที่แตกต่างกันสองรายการหรือมากกว่าที่สร้างขึ้นจากคำขอ http จะมีคุณสมบัติเทียบเท่ากับPromise.all()?

6
เปลี่ยนเส้นทางสถานะไปยังวัสดุรองเริ่มต้นด้วย UI-Router ใน AngularJS
ฉันกำลังสร้างหน้าตามแท็บซึ่งแสดงข้อมูลบางอย่าง ฉันใช้ UI-Router ใน AngularJs เพื่อลงทะเบียนสถานะ เป้าหมายของฉันคือการเปิดแท็บเริ่มต้นหนึ่งแท็บในการโหลดหน้าเว็บ แต่ละแท็บมีแท็บย่อยและฉันต้องการเปิดแท็บย่อยเริ่มต้นเมื่อเปลี่ยนแท็บ ฉันกำลังทดสอบด้วยonEnterฟังก์ชั่นและข้างในฉันใช้$state.go('mainstate.substate');แต่ดูเหมือนว่าจะไม่ทำงานเนื่องจากปัญหาผลกระทบของลูป (ใน state.go เพื่อแทนที่มันเรียกสถานะแม่และอื่น ๆ และมันจะกลายเป็นลูป) $stateProvider .state('main', { url: '/main', templateUrl: 'main.html', onEnter: function($state) { $state.go('main.street'); } }) .state('main.street', { url: '/street', templateUrl: 'submenu.html', params: {tabName: 'street'} }) นี่ฉันสร้างสาธิต plunker ตอนนี้ทุกอย่างใช้งานได้ยกเว้นฉันไม่ได้เปิดแท็บเริ่มต้นและนั่นคือสิ่งที่ฉันต้องการ ขอบคุณสำหรับข้อเสนอแนะความคิดเห็นและแนวคิด

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