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

ฉันใช้ Angular.js สำหรับแอปพลิเคชันที่ใช้ trs ที่ซ่อนอยู่เพื่อจำลองเอฟเฟกต์การเลื่อนออกโดยแสดง tr และเลื่อน div ลงมาใน td ด้านล่าง กระบวนการนี้ใช้งานได้อย่างยอดเยี่ยมโดยใช้ knockout.js เมื่อทำซ้ำบนอาร์เรย์ของแถวเหล่านี้เพราะฉันสามารถใช้<!-- ko:foreach -->กับองค์ประกอบ tr ทั้งสองได้ ด้วยเชิงมุมng-repeatต้องใช้กับองค์ประกอบ html ซึ่งหมายความว่าฉันไม่สามารถทำซ้ำแถวคู่เหล่านี้โดยใช้วิธีการมาตรฐานได้ คำตอบแรกของฉันต่อสิ่งนี้คือการสร้างคำสั่งเพื่อแสดงถึง double trs เหล่านี้ แต่มันสั้นเพราะเทมเพลตคำสั่งต้องมีองค์ประกอบรูทเดียว แต่ฉันมีสอง ( <tr></tr><tr></tr>) หากใครที่มีประสบการณ์เกี่ยวกับ ng-repeat และ angular ที่แตกมันสามารถอธิบายวิธีแก้ปัญหานี้ได้ผมจะขอบคุณมาก (ฉันควรสังเกตด้วยว่าการติดng-repeatกับ tbody เป็นตัวเลือกหนึ่ง แต่สิ่งนี้ทำให้เกิด tbody หลายตัวและฉันคิดว่านั่นเป็นรูปแบบที่ไม่ดีสำหรับ HTML มาตรฐานแม้ว่าจะแก้ไขฉันถ้าฉันผิด)

125 javascript  html  angularjs 

สิ่งที่น่าสนใจอย่างหนึ่งที่ AngularJS สามารถทำได้คือใช้ตัวกรองกับนิพจน์การเชื่อมโยงฐานข้อมูลซึ่งเป็นวิธีที่สะดวกในการนำไปใช้เช่นสกุลเงินเฉพาะวัฒนธรรมหรือการจัดรูปแบบวันที่ของคุณสมบัติของโมเดล นอกจากนี้ยังดีที่มีคุณสมบัติที่คำนวณในขอบเขต ปัญหาคือคุณลักษณะเหล่านี้ไม่ทำงานกับสถานการณ์จำลองการเชื่อมต่อฐานข้อมูลแบบสองทาง - การเชื่อมฐานข้อมูลทางเดียวจากขอบเขตไปยังมุมมอง นี่ดูเหมือนจะเป็นการมองข้ามไปอย่างชัดเจนในห้องสมุดที่ยอดเยี่ยมอย่างอื่นหรือฉันพลาดอะไรไป? ในKnockoutJSฉันสามารถสร้างคุณสมบัติที่คำนวณด้วยการอ่าน / เขียนซึ่งอนุญาตให้ฉันระบุคู่ของฟังก์ชันซึ่งเรียกว่าเพื่อรับค่าของคุณสมบัติและอีกฟังก์ชันหนึ่งที่ถูกเรียกเมื่อตั้งค่าคุณสมบัติ สิ่งนี้ทำให้ฉันสามารถใช้ตัวอย่างเช่นอินพุตที่รับรู้วัฒนธรรมโดยให้ผู้ใช้พิมพ์ "$ 1.24" และแยกวิเคราะห์เป็นลอยใน ViewModel และมีการเปลี่ยนแปลงใน ViewModel ที่แสดงในอินพุต สิ่งที่ใกล้เคียงที่สุดที่ฉันสามารถพบได้คือการใช้$scope.$watch(propertyName, functionOrNGExpression);สิ่งนี้ช่วยให้ฉันมีฟังก์ชันที่เรียกใช้เมื่อคุณสมบัติในไฟล์$scopeเปลี่ยนแปลง แต่สิ่งนี้ไม่สามารถแก้ปัญหาได้เช่นปัญหาการป้อนข้อมูลที่คำนึงถึงวัฒนธรรม สังเกตเห็นปัญหาเมื่อฉันพยายามแก้ไข$watchedคุณสมบัติภายใน$watchวิธีการ: $scope.$watch("property", function (newValue, oldValue) { $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue; $scope.property = Globalize.parseFloat(newValue); }); ( http://jsfiddle.net/gyZH8/2/ ) องค์ประกอบการป้อนข้อมูลจะสับสนมากเมื่อผู้ใช้เริ่มพิมพ์ ฉันปรับปรุงโดยการแยกคุณสมบัติออกเป็นสองคุณสมบัติหนึ่งสำหรับค่าที่ไม่ได้แยกวิเคราะห์และอีกค่าหนึ่งสำหรับค่าที่แยกวิเคราะห์: $scope.visibleProperty= …

124 javascript  angularjs  data-binding  angularjs-scope 

ฉันมีการป้อนข้อความและไม่ต้องการอนุญาตให้ผู้ใช้ใช้ช่องว่างและทุกอย่างที่พิมพ์จะกลายเป็นตัวพิมพ์เล็ก ฉันรู้ว่าฉันไม่ได้รับอนุญาตให้ใช้ฟิลเตอร์กับ ng-model เช่น ng-model='tags | lowercase | no_spaces' ฉันมองไปที่การสร้างคำสั่งของตัวเอง แต่เพิ่มฟังก์ชันเข้าไป $parsersและ$formattersไม่ได้อัปเดตอินพุตมีเพียงองค์ประกอบอื่น ๆ ที่มีng-modelอยู่ ฉันจะเปลี่ยนข้อมูลที่ฉันกำลังพิมพ์อยู่ได้อย่างไร โดยพื้นฐานแล้วฉันกำลังพยายามสร้างคุณสมบัติ 'แท็ก' ที่ใช้งานได้เหมือนกับที่นี่ใน StackOverflow

124 angularjs  angularjs-filter  dom-manipulation  angularjs-ng-model 

ปิด . คำถามนี้จะต้องมีมากขึ้นมุ่งเน้น ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เน้นไปที่ปัญหาเดียวโดยแก้ไขโพสต์นี้เท่านั้น ปิดให้บริการใน6 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันควรใช้ Protractor หรือ Karma สำหรับการทดสอบ end-to-end หรือไม่? Angular-seed ใช้ Protractor / Selenium WebDriver สำหรับ E2E แต่การสอนเชิงมุม - phonecat ใช้กรรม ฉันอ่านว่าฉันควรใช้ Karma สำหรับการทดสอบหน่วยและ Protractor สำหรับ E2E ซึ่งดูเหมือนจะดี แต่ฉันคิดว่าฉันจะถามที่นี่เพื่อรับความคิดเห็นของนักพัฒนาคนอื่น ๆ

124 angularjs  protractor 

ฉันใช้ AngularJS v1.2.0-rc.2 กับ ui-router v0.2.0 ฉันต้องการที่จะผ่านรัฐอ้างอิงไปยังรัฐอื่นดังนั้นผมจึงใช้toParamsของ$state.goชอบโดย: $state.go('toState', {referer: $state.current.name}); ตามที่เอกสารนี้ควรเติม$stateParamsในtoStateการควบคุม undefinedแต่มันเป็น ฉันขาดอะไรไป? ฉันได้สร้างกองพลเพื่อสาธิต: http://plnkr.co/edit/ywEcG1

123 angularjs  angular-ui-router 

ฉันกำลังเขียนแอปพลิเคชันตัวอย่างโดยใช้ angularjs ฉันได้รับข้อผิดพลาดที่ระบุไว้ด้านล่างบนเบราว์เซอร์ Chrome ข้อผิดพลาดคือ ข้อผิดพลาด: [ng: areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined ซึ่งแสดงผลเป็น Argument 'ContactController' ไม่ใช่ฟังก์ชันไม่ได้กำหนดไว้ รหัส <!DOCTYPE html> <html ng-app> <head> <script src="../angular.min.js"></script> <script type="text/javascript"> function ContactController($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; } </script> </head> <body> <h1> modules sample </h1> <div ng-controller="ContactController"> Email:<input …

123 javascript  angularjs  angularjs-directive  angularjs-scope 

ฉันจะแสดงวันที่และเวลาใน AngularJS อย่างถูกต้องได้อย่างไร? เอาต์พุตด้านล่างแสดงทั้งอินพุตและเอาต์พุตโดยมีและไม่มีตัวกรองวันที่ AngularJS: In: {{v.Dt}} AngularJS: {{v.Dt | date:'yyyy-MM-dd HH:mm:ss Z'}} สิ่งนี้พิมพ์: In: 2012-10-16T17:57:28.556094Z AngularJS: 2012-10-16T17:57:28.556094Z รูปแบบการแสดงผลที่ต้องการคือ 2010-10-28 23:40:23 0400หรือ2010-10-28 23:40:23 EST

123 javascript  angularjs  date  datefilter 

ฉันรู้สึกกระอักกระอ่วนเกี่ยวกับวิธีที่ดีที่สุด (และถูกต้อง) หากฉันต้องการปิดการใช้งานการควบคุมแบบฟอร์ม (หรืออย่างน้อยก็ทำให้ไม่สามารถใช้งานได้สำหรับการโต้ตอบของผู้ใช้) ในช่วงเวลาหนึ่งที่ผู้ใช้คลิกปุ่ม "บันทึก" หรือ "ส่ง" และข้อมูลที่เดินทางผ่านสายไฟ ฉันไม่ต้องการใช้ JQuery (ซึ่งชั่วร้าย !!!) และค้นหาองค์ประกอบทั้งหมดเป็นอาร์เรย์ (ตามคลาสหรือเครื่องหมายแอตทริบิวต์) ความคิดที่ฉันมีจนถึงตอนนี้คือ: ทำเครื่องหมายองค์ประกอบทั้งหมดด้วยcm-form-controlคำสั่งที่กำหนดเองซึ่งจะสมัครรับการแจ้งเตือน 2 รายการ: "ส่งข้อมูล" และ "ประมวลผลข้อมูล" จากนั้นรหัสที่กำหนดเองจะรับผิดชอบในการส่งการแจ้งเตือนครั้งที่สองหรือแก้ไขคำสัญญา ใช้การpromiseTrackerบังคับ (โชคร้าย!) เพื่อสร้างรหัสที่โง่มากเช่นng-show="loadingTracker.active()". เห็นได้ชัดว่าองค์ประกอบบางอย่างไม่มีng-disabledและฉันไม่ต้องการให้ผู้ใช้ng-hide/showหลีกเลี่ยงปุ่ม "เต้นรำ" กัดกระสุนแล้วยังใช้ JQuery ใครมีความคิดที่ดีกว่านี้หรือไม่? ขอบคุณล่วงหน้า! อัปเดต: แนวคิด fieldset ใช้งานได้จริง นี่คือซอง่ายๆสำหรับผู้ที่ยังต้องการทำเหมือนเดิมhttp://jsfiddle.net/YoMan78/pnQFQ/13/ HTML: <div ng-app="myApp"> <ng-form ng-controller="myCtrl"> Saving: {{isSaving}} <fieldset ng-disabled="isSaving"> <input type="text" ng-model="btnVal"/> <input …

122 javascript  forms  angularjs  submit 

ฉันมีคำสั่ง AngularJS ที่มีการtemplateUrlกำหนด ฉันกำลังพยายามทดสอบหน่วยกับจัสมิน JavaScript ของจัสมินของฉันมีลักษณะดังต่อไปนี้ตามคำแนะนำของสิ่งนี้ : describe('module: my.module', function () { beforeEach(module('my.module')); describe('my-directive directive', function () { var scope, $compile; beforeEach(inject(function (_$rootScope_, _$compile_, $injector) { scope = _$rootScope_; $compile = _$compile_; $httpBackend = $injector.get('$httpBackend'); $httpBackend.whenGET('path/to/template.html').passThrough(); })); describe('test', function () { var element; beforeEach(function () { element = $compile( '<my-directive></my-directive>')(scope); …

122 angularjs  angularjs-directive  jasmine 

ฉันมีโค้ด jQuery ชิ้นนี้ที่ใช้งานได้ดีจากต้นกำเนิดข้าม: jQuery.ajax({ url: "http://example.appspot.com/rest/app", type: "POST", data: JSON.stringify({"foo":"bar"}), dataType: "json", contentType: "application/json; charset=utf-8", success: function (response) { console.log("success"); }, error: function (response) { console.log("failed"); } }); ตอนนี้ฉันกำลังพยายามที่จะแปลงสิ่งนี้เป็นรหัส Angular.js โดยไม่ประสบความสำเร็จ: $http({ url: "http://example.appspot.com/rest/app", dataType: "json", method: "POST", data: JSON.stringify({"foo":"bar"}), headers: { "Content-Type": "application/json; charset=utf-8" } }).success(function(response){ $scope.response = response; …

122 jquery  ajax  angularjs  cross-domain  angular-http 

ถ้าฉันมีอาร์เรย์ของออบเจ็กต์และต้องการผูกโมเดลเชิงมุมเข้ากับคุณสมบัติขององค์ประกอบใดองค์ประกอบหนึ่งตามตัวกรองฉันจะทำอย่างไร ฉันสามารถอธิบายได้ดีขึ้นด้วยตัวอย่างที่เป็นรูปธรรม: HTML: <!DOCTYPE html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body ng-controller="MyCtrl"> <input ng-model="results.year"> <input ng-model="results.subjects.title | filter:{grade:'C'}"> </body> </html> ควบคุม: function MyCtrl($scope) { $scope.results = { year:2013, subjects:[ {title:'English',grade:'A'}, {title:'Maths',grade:'A'}, {title:'Science',grade:'B'}, {title:'Geography',grade:'C'} ] }; } JSBin: http://jsbin.com/adisax/1/edit ฉันต้องการที่จะกรองอินพุตที่สองกับเรื่องที่มีเกรด C ' แต่ฉันไม่ต้องการที่จะผูกรูปแบบไปยังชั้นประถมศึกษาปี ; ฉันต้องการผูกไว้กับชื่อวิชาที่มีเกรด …

122 angularjs 

ฉันใช้ 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>

122 javascript  angularjs  angularjs-ng-repeat 

มันผิดหรือไม่ที่จะถือว่าngIncludeสามารถใช้เส้นทางดิบ? ฉันพยายามตั้งค่าngIncludeดังต่อไปนี้: <div ng-include src="views/header.html"></div> วิธีนี้ใช้ไม่ได้ แต่ถ้าฉันทำสิ่งนี้มันได้ผล // HeaderController app.controller('HeaderCtrl', function($scope){ $scope.templates = {[ template: { url: 'views/header.html' } ]}; $scope.template = $scope.templates[0].template; }); ใน index.html ของฉัน <div ng-controller="HeaderCtrl"> <div ng-include src="template.url"></div> </div> ไม่ngIncludeเพียง แต่ยกเว้นค่าออกจากขอบเขตหรือไม่ ถ้าเป็นเช่นนั้นทำไมจึงเป็นเช่นนี้และไม่ใช่การรวม html บางส่วนโดยตรง

121 angularjs  angularjs-ng-include 

ฉันอ่านเกี่ยวกับไวยากรณ์ใหม่จาก angularJS ที่เกี่ยวข้องcontroller as xxx ไวยากรณ์InvoiceController as invoiceบอกให้ Angular สร้างอินสแตนซ์ตัวควบคุมและบันทึกไว้ในใบแจ้งหนี้ตัวแปรในขอบเขตปัจจุบัน การแสดงภาพ: โอเคฉันจะไม่มีพารามิเตอร์$scopeในคอนโทรลเลอร์ของฉันและโค้ดจะสะอาดกว่าในคอนโทรลเลอร์มาก แต่ ฉันจะต้องระบุนามแฝงอื่นในมุมมอง จนถึงตอนนี้ฉันสามารถทำได้: <input type="number" ng-model="qty" /> ....controller('InvoiceController', function($scope) { // do something with $scope.qty <--notice และตอนนี้ฉันทำได้: <input type="number" ng-model="invoic.qty" /> <-- notice ....controller('InvoiceController', function() { // do something with this.qty <--notice คำถาม เป้าหมายในการทำคืออะไร? นำออกจากที่หนึ่งและเพิ่มไปที่อื่น? ฉันจะดีใจที่ได้เห็นสิ่งที่ฉันขาดหายไป

121 javascript  angularjs 

ฉันมีการป้อนข้อความ เมื่ออินพุตได้รับโฟกัสฉันต้องการเลือกข้อความภายในอินพุต ด้วย jQuery ฉันจะทำเช่นนี้: <input type="text" value="test" /> $("input[type=text]").click(function() { $(this).select(); // would select "test" in this example }); ฉันค้นหาไปรอบ ๆ เพื่อลองหาวิธีเชิงมุม แต่ตัวอย่างส่วนใหญ่ที่ฉันพบคือการจัดการกับคำสั่งที่กำลังดูคุณสมบัติโมดอลสำหรับการเปลี่ยนแปลง ฉันสมมติว่าฉันต้องการคำสั่งที่คอยดูอินพุตที่ได้รับโฟกัส ฉันจะทำอย่างไร

121 angularjs  angularjs-directive