Question

我正在使用http.get，我需要在选择一个字符后重新加载模板，以便我的模板根据我选择的内容给出答案

模板的代码

<div class="container-fluid" ng-controller="CriterioCtrl">

    <div id="result"></div>

    <div>
        Selected Items:
        <div ng-repeat="id in selection">
            {{id}}
        </div>        
    </div>

    <div ng-repeat-start="crit in data" class="row">
        <h2 align="center">{{crit.name}}</h2>

        <div ng-repeat="caracter in crit.characters" class="col-md-4">
            <div type="checkbox" value="{{caracter.id}}" ng-checked="selection.indexOf(caracter.id) > -1" ng-click="clickSelection(caracter.id)">
                <a href="#crit" class="thumbnail" ng-click="clickCriterios(caracter.id)">
                    <h4 align="center">{{caracter.name}}</h4>
                    <img ng-src="http://skaphandrus.com/{{caracter.image_url}}"/>
                </a>
            </div>
        </div>

    </div>

    <div ng-repeat-end>
    </div>


<!--<button class="btn" ng-click="toggle()">Toggle</button>
<p ng-show="visible">Hello World!</p> codigo de um botao -->

</div>

此代码用于选择

$scope.selection=[];

$scope.clickSelection = function clickSelection(caracterId) {
    var idx = $scope.selection.indexOf(caracterId);
    // is currently selected
    if (idx > -1) {
        $scope.selection.splice(idx, 1);
    }   
    // is newly selected
    else {
        $scope.selection.push(caracterId);
    }
    var selectedId = $scope.selection;  
    console.log(selectedId);
    // Check browser support
    if (typeof(Storage) != "undefined") {
        // Store
        localStorage.setItem("idSelect", selectedId);
        // Retrieve
        document.getElementById("result").innerHTML = localStorage.getItem("idSelect");
    }
};

此代码是另一个控制器中的http部分

MyApp.controller('EspeciesCtrl', function ($scope, $http) {

    $http({
        url: 'someurl', 
        method: "post",
        params: {module_id: localStorage.getItem("idMod"),"characters[]": [localStorage.getItem("idSelect")]}
    })
    .then(function(res){
        $scope.data = res.data;
    });
});

这是在选择后必须更改的模板代码

<div class="container-fluid" ng-controller="EspeciesCtrl">

    <div class="row">
        <div ng-repeat="esp in data" class="col-md-6">
            <a href="#infEsp" class="thumbnail" ng-click="clickEspecie(esp.id)">
                <h4 align="center">{{esp.name}}</h4>
                <img ng-src="{{esp.image_src}}"/>
            </a> 
        </div>
    </div>

</div>

我该怎么做？

Answer 1

编辑1

如果我已正确理解，您可能需要使用ng-show（https://docs.angularjs.org/api/ng/directive/ngShow），其布尔值检查用户是否选择了任何内容并显示您需要的额外代码，而不是尝试有另一个http请求。

此外，您似乎对$scope.data和esp使用了crit，因此您最终会遇到错误。

您可能不需要重新加载模板。您可能希望使用模板内$scope.data中的数据，以便让Angular管理视图上的更新。 $ scope.data更改后，呈现的HTML也会更改。

我无法发表评论，但如果您可以共享您正在使用的模板并在您的请求中更具体，那将会很有帮助：）

AngularJs如何在选择字符后重新加载模板页面

1 个答案: