加载动态数据在Anjular js

时间:2018-02-19 09:57:56

标签: angularjs

我想在点击标签上绑定数据,并且需要在所有标签的公共div中显示。示例

<ul><li>Tab1</li><li>Tab2</li><li>Tab3</li></ul>

<div id=tabsdata>data will bind here using angular js templates</div>

所以根据这个场景我怎么能在角度js中处理它? tabdata中的数据是动态数据。对于tab1中的示例,我想保存用户信息。在tab2中我想显示这样的用户列表..

1 个答案:

答案 0 :(得分:1)

Forget about jQuery / JavaScript syntax and logic。 AngularJS拥有您需要的一切。我认为您需要使用ng-repeat呈现它们。这将允许您动态添加它们。之后,只需添加ng-click即可绑定点击事件并按照您的要求执行操作。

这是一个演示,你可以点击它来选择它们:

&#13;
&#13;
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
  $scope.tabsdata = ["Tab1", "Tab2", "Tab3"];
  $scope.select = function(tab) {
    $scope.selected = tab;
  }
  $scope.add = function() {
    $scope.tabsdata.push("Tab" + ($scope.tabsdata.length + 1));
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="customersCtrl">
  - Click on tabs to select them -
  <ul>
    <li ng-repeat="tab in tabsdata" ng-click="select(tab)">{{tab}}</li>
  </ul>
  <button ng-click="add()">+</button>
  <br>
  <div>{{selected}}</div>
</div>
&#13;
&#13;
&#13;