我有一个gulp rjs任务连接和uglifies我所有的自定义.JS文件(任何非供应商库).
我想要做的是从这个任务(控制器和指令)中排除一些文件/目录.
继承我的树:
- application
- resources
- js
main.js
- vendor
- jquery
- modernzr
- angular
- controllers
- controller1
- controller2
- controller3
- directives
- directives1
- directives2
- directives3
- widgets
- widget1
- widget2
- widget3
- widget4
- modules
- modules1
- modules2
- modules3
- modules4
在这里,我的gulp.js
dir = {
app: 'application',
dest: 'dest',
};
config = {
src: {
js: dir.app + '/resources/js'
},
dest: {
js: dir.dest + '/resources/js' …我是第一次玩AngularJS,我努力使用ng-include作为我的页眉和页脚.
这是我的树:
myApp
assets
- CSS
- js
- controllers
- vendor
- angular.js
- route.js
......
......
......
main.js
pages
- partials
- structure
header.html
navigation.html
footer.html
index.html
home.html
index.html的:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS Test</title>
<script src="/assets/js/vendor/angular.js"></script>
<script src="/assets/js/vendor/route.js"></script>
<script src="/assets/js/vendor/resource.js"></script>
<script src="/assets/js/main.js"></script>
</head>
<body>
<div ng-include src="partials/structure/header.url"></div>
<div ng-include src="partials/structure/navigation.url"></div>
<div id="view" ng-view></div>
<div ng-include src="partials/structure/footer.url"></div>
</body>
</html>
main.js
var app = angular.module("app", ["ngResource", "ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when("/login", {
templateUrl: "login.html",
controller: "LoginController"
});
$routeProvider.when("/home", { …我有一个从JSON文件中检索数据的服务.
数据中的一些数据全部为大写,例如:
$scope.FootballClubs = [{
CompanyName: [MANCHESTER UNITED, LIVERPOOL FOOTBALL CLUB, CHELSEA, WIGAN UNTIED, LEICESTER CITY]
}];
在我的HTML中,我只是抛出上述内容:
<div ng-repeat="name in FootballClubs">
{{ name.CompanyName }}
</div>
抛出:
MANCHESTER UNITED
LIVERPOOL FOOTBALL CLUB
CHELSEA
WIGAN UNTIED
LEICESTER CITY
我想要展示的是:
Manchester United
Liverpool Football Club
Chelsea
Wigan United
Leicester City
angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
我有一个简单的ng-repeat抛出数据,它显示的字段之一是NumberOfStamps:
<tr ng-repeat-start="list in Data.Items ">
<td><a href=" {[{list.Title}]} {[{list.ForeName}]} {[{list.SurName}]}</a></td>
<td>(Date of Birth {[{list.Dob}]})</td>
<td>{[{list.NumberOfStamps}]} stamps</td>
</tr>
示例输出:
Mr Adam Happy Date of Birth 01/6/1984 16 stamps
Mr Adam Sad Date of Birth 24/11/1975 0 stamps
Mr Adam Green Date of Birth 02/1/1963 1 stamps
Mr Adam Red Date of Birth 21/1/1951 12 stamps
Mr Adam Blue Date of Birth 28/10/1998 0 stamps
Mr Adam Brown Date of Birth 25/9/2010 0 stamps
Mr Adam Black Date of Birth 24/8/1954 …angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
我使用简单的方法ng-repeat来生成国家列表.每个列表中都有一个隐藏的行/ div,可以展开和折叠.
我面临的问题是,在我将Angular引入我的应用程序之前,我手动硬编码了元素的ID,例如:
<li data-show="#country1">
{{country.name}} has population of {{country.population}}
<div id="country1">
<p>Expand/collapse content
</div>
</li>
<li data-show="#country2">
{{country.name}} has population of {{country.population}}
<div id="country2">
<p>Expand/collapse content
</div>
</li>
<li data-show="#country3">
{{country.name}} has population of {{country.population}}
<div id="country3">
<p>Expand/collapse content
</div>
</li>
<li data-show="#country4">
{{country.name}} has population of {{country.population}}
<div id="country4">
<p>Expand/collapse content
</div>
</li>
新代码使用ng-repeat:
<li ng-repeat="country in countries" data-show="????">
{{country.name}} has population of {{country.population}}
<div id="???">
<p>Expand/collapse content
</div>
</li>
如何在我的动态/增量ID中分配ng-repeat？
angularjs angularjs-directive ng-repeat angularjs-scope angularjs-ng-repeat
我有一个$ scope.myData对象,包含一大块数据.我想要做的是显示数据,但过滤掉空值和空字符串:
$scope.myData = [
{
"ID" : "001",
"Message" : "test test test test"
},
{
"ID" : "002",
"Message" : "test test test test"
},
{
"ID" : "003",
"Message" : "test test test test"
},
{
"ID" : "004",
"Message" : "test test test test"
},
{
"ID" : "005",
"Message" : " "
},
{
"ID" : "006",
"Message" : "test test test test"
},
{
"ID" : "007",
"Message" : "test test test test"
}, …angularjs angularjs-scope angularjs-ng-repeat angular-filters
我有一个简单的ng-reapt,它显示了一个值列表.在某些输出中,我有几个ng-if来显示/隐藏DIV.
HTML:
<div ng-repeat="details in myDataSet">
<p>{{ details.Name }}</p>
<p>{{ details.DOB }}</p>
<div ng-if="details.Payment[0].Status == '0'">
<p>No payment</p>
</div>
<div ng-if="details.Payment[0].Status == '1' || details.Payment[0].Status == '2'">
<p>Late</p>
</div>
<div ng-if="details.Payment[0].Status == '3' || details.Payment[0].Status == '4' || details.Payment[0].Status == '5'">
<p>Some payment made</p>
</div>
<div ng-if="details.Payment[0].Status == '6'">
<p>Late and further taken out</p>
</div>
<div ng-if="details.Payment[0].Status != '0' || details.Payment[0].Status != '1' || details.Payment[0].Status != '2' || details.Payment[0].Status != '3' || details.Payment[0].Status != '4' || details.Payment[0].Status != '5' || …angularjs ng-switch angularjs-scope angularjs-ng-repeat angular-ng-if
我正试图了解指令,我可以轻松地使用模板函数抛出我的HTML,但是,如果我在我的模板中有一个ng-click,我如何在链接函数中访问它？
我的指示:
app.directive('directiveScroll', function () {
return {
restrict: 'AE',
replace: 'true',
template: '<div class="scroll-btns">' +
'<div class="arrow-left" ng-click="scrollLeft(sectionID)"></div>' +
'<div class="arrow-right" ng-click="scrollRight(sectionID)"></div>' +
'</div>',
link: function(scope, elem, attrs) {
$scope.scrollRight = function () {
console.log("scrollRight clicked");
};
$scope.scrollLeft = function () {
console.log("scrollLeft clicked");
};
}
};
});
正如您所看到的,我已添加$scope.scrollRight到我的link功能中,但是在单击时,控制台中没有任何内容.
如果我放置:
$scope.scrollRight = function () {
console.log("scrollRight clicked");
};
$scope.scrollLeft = function () {
console.log("scrollLeft clicked");
};
在我的控制器中(并且在我的指令中),它按预期工作.
任何帮助赞赏.
angularjs angularjs-directive angularjs-scope angularjs-ng-click
我有一个简单的ng-repeat显示分数列表和正面或负面的值.
我想要做的是当值为Negative时,显示红色背景CSS类,当为Positive时,显示绿色CSS类.但是,出于某种原因,我总是在我的页面上看到红色的 CSS类.
HTML:
<tr ng-repeat="scores in Test" ng-class="{true: 'warning', false: 'ok'}[scores.Indicator == 'Negative']">
<td>Overall: {{ scores.Indicator }}</td>
</tr>
CSS:
.warning {
background: red;
}
.ok {
background: green;
}
angularjs angularjs-directive angularjs-ng-repeat ng-class angular-ng-if
我想做的很简单.用户输入一个值,就按一下按钮,我叫JS中检索我的JSON数据和执行上对JSON输入的值搜索的服务,如果发现匹配,显示"所有者".
HTML:
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<input type="text" ng-model="enteredValue">
</br>
<button type="button" ng-Click="findValue(enteredValue)">Search</button>
</div>
</div>
JS:
angular.module('myApp', []).controller('MainCtrl', function ($scope, $http, getDataService) {
$scope.findValue = function(enteredValue) {
alert("Searching for = " + enteredValue);
$scope.MyData = [];
getDataService.getData(function(data) {
$scope.MyData = data.SerialNumbers;
});
}
});
angular.module('myApp', []).factory('getDataService', function($http) {
return {
getData: function(done) {
$http.get('/route-to-data.json')
.success(function(data) {
done(data);
})
.error(function(error) {
alert('An error occured');
});
}
}
});
我的JSON:
{
"SerialNumbers": {
"451651": [
{
"Owner": "Mr Happy"
}
],
"5464565": …angularjs angularjs-directive angularjs-scope angularjs-ng-repeat angular-services