การเขียนโปรแกรม angularjs

5

ฉันต้องการแก้ไขเล็กน้อยกับคำสั่งของบุคคลที่สาม (โดยเฉพาะAngular UI Bootstrap ) ฉันเพียงแค่ต้องการเพิ่มขอบเขตของpaneคำสั่ง: angular.module('ui.bootstrap.tabs', []) .controller('TabsController', ['$scope', '$element', function($scope, $element) { // various methods }]) .directive('tabs', function() { return { // etc... }; }) .directive('pane', ['$parse', function($parse) { return { require: '^tabs', restrict: 'EA', transclude: true, scope:{ heading:'@', disabled:'@' // <- ADDED SCOPE PROPERTY HERE }, link: …

114 javascript angularjs angularjs-directive angular-ui-bootstrap bower

4

วิธีการวนซ้ำรายการที่ส่งคืนโดยฟังก์ชันด้วย ng-repeat?

ฉันต้องการสร้าง div ซ้ำ ๆ รายการคือวัตถุที่ส่งคืนโดยฟังก์ชัน อย่างไรก็ตามข้อผิดพลาดในการรายงานรหัสต่อไปนี้: ถึงการทำซ้ำ 10 $ Digest () ยกเลิก! jsfiddle อยู่ที่นี่: http://jsfiddle.net/BraveOstrich/awnqm/ <body ng-app> <div ng-repeat="entity in getEntities()"> Hello {{entity.id}}! </div> </body>

114 angularjs

4

AngularJS - แปลงวันที่ในคอนโทรลเลอร์

ใครช่วยแนะนำวิธีแปลงวันที่จาก1387843200000รูปแบบนี้เป็นรูปแบบนี้24/12/2013 ภายในคอนโทรลเลอร์ของฉันได้ไหม เพียงแค่ FYI วันที่ของฉันจะถูกจัดเก็บในลักษณะนี้และเมื่อเชื่อมโยงกับรูปแบบการแก้ไขที่มีinput type="date"ฟิลด์จะไม่ถูกเติมเลย #Plunker สาธิตที่นี่ EditCtrl app.controller("EditCtrl", [ "$scope", "$filter", "db" function ($scope, $filter, db){ // this gets me an item object var item = db.readItem(); // item date = 1387843200000 // this returns undefined item.date = $filter('date')(date[ item.date, "dd/MM/yyyy"]); }]); Edit.html - เทมเพลต <form name="editForm" class="form-validate"> …

114 angularjs date datetime datetime-format ng-controller

5

อัพเดตตัวแปรขอบเขตหลักใน AngularJS

ฉันมีตัวควบคุมสองตัวตัวหนึ่งห่อหุ้มไว้ด้วยกัน ตอนนี้ฉันรู้ว่าขอบเขตลูกสืบทอดคุณสมบัติจากขอบเขตหลัก แต่มีวิธีอัปเดตตัวแปรขอบเขตหลักหรือไม่ จนถึงตอนนี้ฉันยังไม่พบวิธีแก้ปัญหาที่ชัดเจน ในสถานการณ์ของฉันฉันมีตัวควบคุมปฏิทินในแบบฟอร์ม ฉันต้องการอัปเดตวันที่เริ่มต้นและวันที่สิ้นสุดจากขอบเขตหลัก (ซึ่งก็คือแบบฟอร์ม) เพื่อให้แบบฟอร์มมีวันที่เริ่มต้นและวันที่สิ้นสุดเมื่อส่ง

113 javascript angularjs angularjs-scope prototype angularjs-controller

6

ฉันจะสลับ ng-show ใน AngularJS ตามบูลีนได้อย่างไร

ฉันมีแบบฟอร์มสำหรับตอบกลับข้อความที่ต้องการแสดงเมื่อisReplyFormOpenเป็นจริงเท่านั้นและทุกครั้งที่คลิกปุ่มตอบกลับฉันต้องการสลับว่าจะแสดงแบบฟอร์มหรือไม่ ฉันจะทำเช่นนี้ได้อย่างไร?

113 javascript html angularjs ng-show

4

ฟังก์ชันการจัดเรียงแบบกำหนดเองใน ng-repeat

ฉันมีชุดกระเบื้องที่แสดงจำนวนหนึ่งขึ้นอยู่กับว่าผู้ใช้เลือกตัวเลือกใด ตอนนี้ฉันต้องการจัดเรียงตามตัวเลขที่แสดง โค้ดด้านล่างแสดงให้เห็นว่าฉันใช้งานได้อย่างไร (โดยการรับ / ตั้งค่าในขอบเขตการ์ดหลัก) ตอนนี้เนื่องจากฟังก์ชัน orderBy ใช้สตริงฉันจึงพยายามตั้งค่าตัวแปรในขอบเขตการ์ดที่เรียกว่า curOptionValue และจัดเรียงตามนั้น แต่ดูเหมือนจะไม่ได้ผล คำถามจึงกลายเป็นว่าฉันจะสร้างฟังก์ชันการจัดเรียงแบบกำหนดเองได้อย่างไร <div ng-controller="aggViewport" > <div class="btn-group" > <button ng-click="setOption(opt.name)" ng-repeat="opt in optList" class="btn active">{{opt.name}}</button> </div> <div id="container" iso-grid width="500px" height="500px"> <div ng-repeat="card in cards" class="item {{card.class}}" ng-controller="aggCardController"> <table width="100%"> <tr> <td align="center"> <h4>{{card.name}}</h4> </td> </tr> <tr> <td align="center"><h2>{{getOption()}}</h2></td> …

113 angularjs ng-repeat

7

AngularJS Directive Restrict A vs E

ฉันทำงานในทีมเล็ก ๆ สร้างใน AngularJS และพยายามรักษามาตรฐานพื้นฐานและแนวทางปฏิบัติที่ดีที่สุด โดยเฉพาะอย่างยิ่งเราค่อนข้างใหม่กับ Angular คำถามของฉันเกี่ยวกับ Directives ถูกต้องมากขึ้นrestrictตัวเลือก พวกเราบางคนใช้restrict: 'E'จึงมี<my-directive></my-directive>ใน html คนอื่นกำลังใช้restrict: 'A'และมี<div my-directive></div>อยู่ใน html จากนั้นแน่นอนคุณสามารถใช้ restrict: 'EA'และใช้อย่างใดอย่างหนึ่งข้างต้นได้ ในขณะนี้มันไม่ใช่เรื่องใหญ่ แต่เมื่อโครงการนี้ใหญ่โตเท่าที่จะเป็นไปได้ฉันก็อยากให้ใครก็ตามที่ดูมันเข้าใจได้ง่ายว่าเกิดอะไรขึ้น มีข้อดี / ข้อเสียของคุณลักษณะหรือองค์ประกอบในการทำสิ่งต่างๆหรือไม่? มีข้อผิดพลาดใดบ้างที่เราควรทราบหากเลือก say element over attribute?

113 javascript html angularjs

8

วิธีกรอง (คีย์ค่า) ด้วย ng-repeat ใน AngularJs

ฉันกำลังพยายามทำสิ่งที่ชอบ: <div ng-controller="TestCtrl"> <div ng-repeat="(k,v) in items | filter:hasSecurityId"> {{k}} {{v.pos}} </div> </div> AngularJs ส่วน: function TestCtrl($scope) { $scope.items = { 'A2F0C7':{'secId':'12345', 'pos':'a20'}, 'C8B3D1':{'pos':'b10'} }; $scope.hasSecurityId = function(k,v) { return v.hasOwnProperty('secId'); } } แต่อย่างใดมันแสดงให้ฉันเห็นทุกรายการ ฉันจะกรอง (คีย์ค่า) ได้อย่างไร

113 javascript angularjs frameworks ng-repeat angular-filters

6

ตั้งโฟกัสองค์ประกอบในลักษณะเชิงมุม

หลังจากหาตัวอย่างวิธีตั้งค่าองค์ประกอบโฟกัสด้วยเชิงมุมแล้วฉันเห็นว่าส่วนใหญ่ใช้ตัวแปรบางตัวเพื่อดูแล้วตั้งโฟกัสและส่วนใหญ่ใช้ตัวแปรที่แตกต่างกันหนึ่งตัวแปรสำหรับแต่ละฟิลด์ที่ต้องการกำหนดโฟกัส ในรูปแบบที่มีฟิลด์จำนวนมากนั่นหมายถึงตัวแปรต่างๆมากมาย ด้วยวิธี jquery ในใจ แต่ต้องการทำแบบนั้นในเชิงมุมฉันได้สร้างวิธีแก้ปัญหาที่เราตั้งโฟกัสในฟังก์ชั่นใด ๆ โดยใช้ id ขององค์ประกอบดังนั้นเนื่องจากฉันยังใหม่มากในเชิงมุมฉันต้องการรับความคิดเห็นบางอย่างถ้า วิธีนั้นถูกต้องมีปัญหาอะไรก็ได้ที่ช่วยให้ฉันทำวิธีนี้ได้ดีขึ้นในเชิงมุม โดยพื้นฐานแล้วฉันสร้างคำสั่งที่เฝ้าดูค่าขอบเขตที่กำหนดโดยผู้ใช้ด้วยคำสั่งหรือ focusElement ของค่าเริ่มต้นและเมื่อค่านั้นเหมือนกับ id ขององค์ประกอบองค์ประกอบนั้นจะตั้งโฟกัสเอง angular.module('appnamehere') .directive('myFocus', function () { return { restrict: 'A', link: function postLink(scope, element, attrs) { if (attrs.myFocus == "") { attrs.myFocus = "focusElement"; } scope.$watch(attrs.myFocus, function(value) { if(value == attrs.id) { element[0].focus(); } }); …

113 angularjs focus setfocus

8

การแยกวิเคราะห์การตอบสนอง JSONP $ http.jsonp () ใน angular.js

ฉันใช้$http.jsonp()คำขอของเชิงมุมซึ่งส่งคืน json ที่ห่อด้วยฟังก์ชันได้สำเร็จ: var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback"; $http.jsonp(url). success(function(data, status, headers, config) { //what do I do here? }). error(function(data, status, headers, config) { $scope.error = true; }); จะเข้าถึง / แยกวิเคราะห์ฟังก์ชันที่ห่อหุ้ม - JSON ได้อย่างไร

112 javascript angularjs jsonp

6

ใช้ความสำเร็จ / ข้อผิดพลาด / สุดท้าย / จับด้วยสัญญาใน AngularJS

ฉันกำลังใช้ $httpใน AngularJs และฉันไม่แน่ใจเกี่ยวกับวิธีใช้สัญญาที่ส่งคืนและจัดการข้อผิดพลาด ฉันมีรหัสนี้: $http .get(url) .success(function(data) { // Handle data }) .error(function(data, status) { // Handle HTTP error }) .finally(function() { // Execute logic independent of success/error }) .catch(function(error) { // Catch and handle exceptions from success/error/finally functions }); วิธีนี้เป็นวิธีที่ดีหรือมีวิธีที่ง่ายกว่านี้ไหม

112 angularjs promise angularjs-http

6

ใช้แอตทริบิวต์สไตล์ CSS แบบไดนามิกใน Angular JS

นี่น่าจะเป็นปัญหาง่ายๆ แต่ดูเหมือนจะหาทางแก้ไม่ได้ ฉันมีมาร์กอัปต่อไปนี้: <div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div> ฉันต้องการให้สีพื้นหลังเชื่อมโยงกับขอบเขตดังนั้นฉันจึงลองสิ่งนี้: <div style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:{{data.backgroundCol}};}"></div> ไม่ได้ผลดังนั้นฉันจึงทำการวิจัยและพบng-styleแต่ก็ไม่ได้ผลฉันจึงลองเอาส่วนไดนามิกออกมาและเขียนโค้ดสไตล์ng-styleให้ยากเช่นนี้ ... <div ng-style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;}"></div> และนั่นก็ไม่ได้ผล ฉันเข้าใจผิดว่าng-styleทำงานอย่างไร? มีวิธีใส่{{data.backgroundCol}}ลงในแอตทริบิวต์สไตล์ธรรมดาและทำให้มันแทรกค่าได้หรือไม่?

112 javascript angularjs ng-style

17

รับวัตถุเฉพาะโดย id จากอาร์เรย์ของวัตถุใน AngularJS

ฉันมีไฟล์ JSON ที่มีข้อมูลบางอย่างที่ฉันต้องการเข้าถึงบนเว็บไซต์ AngularJS ของฉัน ตอนนี้สิ่งที่ฉันต้องการคือรับวัตถุเพียงชิ้นเดียวจากอาร์เรย์ ดังนั้นฉันจึงชอบตัวอย่าง Item ที่มี id 1 ข้อมูลมีลักษณะดังนี้: { "results": [ { "id": 1, "name": "Test" }, { "id": 2, "name": "Beispiel" }, { "id": 3, "name": "Sample" } ] } ฉันต้องการโหลดข้อมูลด้วยฟังก์ชัน AngularJS $ http ดังนี้: $http.get("data/SampleData.json"); ซึ่งใช้งานได้ แต่ตอนนี้ฉันจะรับออบเจ็กต์ข้อมูลเฉพาะ (โดย id) จากอาร์เรย์ที่ฉันได้รับมาได้$http.getอย่างไร ขอบคุณล่วงหน้าสำหรับความช่วยเหลือของ. ทักทาย Marc

111 javascript arrays angularjs json object

23

วิธีแก้ปัญหาการป้อนอัตโนมัติของเบราว์เซอร์ AngularJS โดยใช้คำสั่ง

เมื่อส่งแบบฟอร์มใน AngularJS และใช้ฟังก์ชันการจำรหัสผ่านของเบราว์เซอร์และในการพยายามเข้าสู่ระบบครั้งต่อไปคุณให้เบราว์เซอร์กรอกแบบฟอร์มการเข้าสู่ระบบด้วยชื่อผู้ใช้และรหัสผ่าน$scopeรูปแบบจะไม่เปลี่ยนแปลงตามการป้อนอัตโนมัติ แฮ็กสกปรกเพียงอย่างเดียวที่ฉันพบคือใช้คำสั่งต่อไปนี้: app.directive("xsInputSync", ["$timeout" , function($timeout) { return { restrict : "A", require: "?ngModel", link : function(scope, element, attrs, ngModel) { $timeout(function() { if (ngModel.$viewValue && ngModel.$viewValue !== element.val()) { scope.apply(function() { ngModel.$setViewValue(element.val()); }); } console.log(scope); console.log(ngModel.$name); console.log(scope[ngModel.$name]); }, 3000); } }; }]); ปัญหาคือngModel.$setViewValue(element.val());ไม่ได้เปลี่ยนโมเดลหรือมุมมองตามelement.val()ค่าที่ส่งคืน ฉันจะทำมันให้สำเร็จได้อย่างไร?

111 javascript mvvm angularjs

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"> …

111 angularjs twitter-bootstrap angularjs-ng-repeat ng-repeat

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