Question

我想在用户选择不同的包之后重绘一个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>

的Javascript

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;
    }
}]);

Answer 1

如果我理解你的话，你的意思是这样的

$scope.setPackage = function(pack){
    $scope.car.selected_package = pack;
};

http://jsfiddle.net/a8Lmse80/15/

AngularJS使用ng-repeat重绘div的列表

1 个答案: