AngularJs选择系统字符

我使用http.get后如何重新加载模板页，我需要选择一个字符后重新加载一个模板，以便我的模板，根据给出的答案是什么，我选择AngularJs选择系统字符

的代码模板

<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>

我如何能做到这一点后更改模板的代码？

来源

2015-04-17 RubenSardinha

更具体的你应该从来没有真正需要设置的innerHTML的角度。这就是数据绑定的目的。 –

我知道，但只是为了测试，最终将不会显示 – RubenSardinha

编辑1

如果我理解正确的话，你可能需要使用ng-show（https://docs.angularjs.org/api/ng/directive/ngShow）如果用户选择了什么，告诉你需要额外的代码位，而不是试图其布尔值检查有另一个http请求。

此外，您似乎对esp和crit都使用$scope.data，所以最终会出现错误。

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

我不能发表评论，但它会是有益的，如果你可以分享你正在使用的模板，并在您的要求:)

来源

2015-04-17 11:49:28 datamosh

我已经更新了代码，如果你有什么新的添加请 – RubenSardinha

另一个问题我怎么能传递一个数组到http params？ – RubenSardinha

我在$ scope.data中使用了两个控制器，所以我没有任何错误，并且感谢您的帮助，我会尝试使用您建议的方式，如果我有任何疑问，我会问你。 @datamosh – RubenSardinha

AngularJs选择系统字符

回答

相关问题