AngularJS+Bootstrap

最新推荐文章于 2018-09-08 09:25:30 发布

Accept_008

最新推荐文章于 2018-09-08 09:25:30 发布

阅读量353

点赞数

本文链接：https://blog.csdn.net/Accept_008/article/details/61685727

版权

AngularJS+Bootstrap综合应用案例

1.index.html中<div data-ng-view>内的HTML会根据路由变化而变化

index.html

<body>
<div class="container">

<div class="row">
<div class=col-xs-12>
<h1><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>Music Artists</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div data-ng-view></div>
</div>
</div>
</div>

</body>

2.当点击Item时<div data-ng-view>显示修改HTML页面。

view-detail.html

<div class="form-group">
<label for="txtname">Artist Name:</label>
<input type="text" id="txtName" class="form-control" data-ng-model="Item.Name" />
</div>
<div class="form-group">
<label for="cboGenre">Artist Genre:</label>
<select name="cboGenre" id="cboGenre" class="form-control" data-ng-model="Item.Genre">
<option></option>
<option value="Rock">Rock</option>
<option value="Alternative">Alternative</option>
<option value="Rap">Rap</option>
</select>
</div>
<div class="form-group">
<label for="cboRaating">Artist Genre:</label>
<select name="cboRating" id="cboRating" class="form-control" data-ng-model="Item.Rating">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary" data-ng-click="save()">Save</button>
<button class="btn btn-primary" data-ng-click="cancel()">Cancel</button>
</div>

3.index中默认显示的HTML.

view-list.html

<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Search artists" data-ng-model="search" />

</div>
<table class="table table-striped table-hover">
<tr>
<th>Artistname</th>
<th>Genre</th>
<th>Rating</th>
</tr>
<tr data-ng-repeat="item in data | filter:search" data-ng-click="editItem($index)">
<td>{{item.Name}}</td>
<td>{{item.Genre}}</td>
<td>{{item.Rating}}</td>
</tr>
</table>
<div class="form-group">
<button data-ng-click="addArtist()" class="btn btn-primary">Add Artist</button>
</div>

4.控制器部分

script.js

// Code goes here

var app = angular.module("musicApp", ["ngRoute"]);

app.config(function($routeProvider) {
$routeProvider.when("/Items", {
templateUrl: "view-list.html",
controller: "listController",
})
.when("/Items/add", {
templateUrl: "view-detail.html",
controller: "addController"
})
.when("/Items/:Foo", {
templateUrl: "view-detail.html",
controller: "editController"
})
.otherwise({
redirectTo: "/Items"
})
});

app.factory("musicService", ["$rootScope", function($rootScope) {
var svc = {};

var data = [{
Name: "Grouplove",
Genre: "Alternative",
Rating: 4
}, {
Name: "The Bealtes",
Genre: "Rock",
Rating: 5
}, {
Name: "The cure",
Genre: "New wave",
Rating: 4
}, {
Name: "The Bealtes2",
Genre: "Rock2",
Rating: 3
}, {
Name: "The cure2",
Genre: "New wave2",
Rating: 5
}];
svc.getArtists = function() {
return data;
};

svc.addArtists = function(artist) {
data.push(artist);
};

svc.editArtist = function(index, artist) {
data[index] = artist;
};
return svc;

}]);

app.controller("listController", ["$scope", "$location", "$routeParams", "musicService",
function($scope, $location, $routeParams, musicService) {

$scope.data = musicService.getArtists();

$scope.addArtist = function() {
alert("add");
$location.path("/Items/add");
};

$scope.editItem = function(x) {
alert("edit");
$location.path("/Items/" + x);
};
}
]);

app.controller("addController", ["$scope", "$location", "$routeParams", "musicService",
function($scope, $location, $routeParams, musicService) {
$scope.save = function() {
musicService.addArtists({
Name: $scope.Item.Name,
Genre: $scope.Item.Genre,
Rating: $scope.Item.Rating
});
$location.path("/items");
};

$scope.cancel = function() {
$location.path("/Items1");
}
}
]);

app.controller("editController", ["$scope", "$location", "$routeParams", "musicService",
function($scope, $location, $routeParams, musicService) {
$scope.Item = musicService.getArtists()[parseInt($routeParams.Foo)];
$scope.save = function() {

musicService.addArtists(parseInt($routeParams.Foo), {
Name: $scope.Item.Name,
Genre: $scope.Item.Genre,
Rating: $scope.Item.Rating
});
$location.path("/Items");
};

$scope.cancel = function() {
$location.path("/Items");

}
}
]);