我想在用户选择其他程序包后重绘div列表,但是我找不到找到在选择程序包后AngularJS重绘div的方法。这是我的示例代码:http://jsfiddle.net/bolto/a8Lmse80/13/
或以下代码:
HTML
<div ng-controller="CarPackageCtrl" ng-mouseover="showPackageSelect()" ng-mouseleave="hidePackageSelect()">
<div>{{car.name}}</div>
<div ng-if="car.selected_package.one != undefined">{{car.selected_package.one}}</div>
<div ng-if="car.selected_package.two != undefined">{{car.selected_package.two}}</div>
<div ng-if="car.selected_package.three != undefined">{{car.selected_package.three}}</div>
<div ng-if="car.selected_package.four != undefined">{{car.selected_package.four}}</div>
<div ng-if="car.selected_package.five != undefined">{{car.selected_package.five}}</div>
<div ng-if="car.isShowPackageSelect" class="dropdown pull-right">
<div ng-repeat="i in [] | range:car.packages.length">
<div class="radio_div_edit">
<input class="radio" type="radio" name="group" ng-value="i" ng-model="selected" ng-click="setPackage(car.packages[i]);" />{{car.packages[i].name}}</div>
</div>
</div>
</div>
Java脚本
var app = angular.module('myApp', []);
app.filter('range', function () {
return function (input, total) {
total = parseInt(total);
for (var i = 0; i < total; i++)
input.push(i);
return input;
};
});
app.controller('CarPackageCtrl', ['$scope',
function ($scope) {
$scope.car = new Object();
$scope.car.name = "Keslar";
$scope.car.isShowPackageSelect = true; // should init to false but having trouble with getting ng-mouseover to work, so setting it to false for now
var package = new Object();
package.name = "Basic";
package.one = "stereo";
package.two = "sunroof";
package.five = "spoiler";
$scope.car.packages = [];
$scope.car.packages.push(package);
var package2 = new Object();
package2.name = "Intermediate";
package2.two = "sunroof";
package2.three = "GPS";
package2.four = "rear video";
package2.five = "spoiler";
$scope.car.packages.push(package2);
var package3 = new Object();
package3.name = "Power";
package3.one = "stereo";
package3.two = "sunroof";
package3.three = "GPS";
package3.four = "rear video";
package3.five = "spoiler";
$scope.car.packages.push(package3);
$scope.car.selected_package = $scope.car.packages[0];
$scope.showPackageSelect = function showPackageSelect($scope) {
$scope.car.isShowPackageSelect = true;
}
$scope.hidePackageSelect = function hidePackageSelect($scope) {
$scope.car.isShowPackageSelect = false;
}
$scope.setPackage = function setPackage($scope, package) {
$scope.car.selected_package = package;
}
}]);
最佳答案
如果我没听错,您的意思是这样的
$scope.setPackage = function(pack){
$scope.car.selected_package = pack;
};
http://jsfiddle.net/a8Lmse80/15/