Javascript ng基于单击的重复数据切换

你好，我是新来的

是否可以在不更改dom的情况下单击重复数据更改

在本例中-当单击“名称”选项卡，然后显示“名称”数组中的名称列表时，与单击“ID”选项卡，然后内容替换为ID列表时相同

是否可以使用相同的dom元素从控制器进行管理

<div class="select"><span class="active">Names</span> <span>ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="name in names">{{name.name}}</li>
</ul>

var myApp = angular.module('myApp', []);

myApp.controller('testController', function ($scope) {
    $scope.names = [
        {name : 'nameOne'},
        {name : 'nameTwo'},
        {name : 'nameThree'},
        {name : 'nameFour'},
        {name : 'nameFive'}
    ];

       $scope.IDs = [
        {id : 'idOne'},
        {id : 'idTwo'},
        {id : 'idThree'},
        {id : 'idFour'},
        {id : 'idFive'}
    ];    

});

名称ID

{{name.name}

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'testController'，函数（$scope）{
$scope.names=[
{name:'nameOne'}，
{name:'nameTwo'}，
{name:'nametree'}，
{name:'nameFour'}，
{name:'nameFive'}
];
$scope.IDs=[
{id:'idOne'}，
{id:'idTwo'}，
{id:'idThree'}，
{id:'idFour'}，
{id:'idFive'}
];    
});

---

谢谢你可以试试这样的东西

<div class="select"><span class="active" ng-click="changeToName()">Names</span> <span ng-click="changeToID()">ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="name in myRepeat">{{ (name.name || name.id) }}</li>
</ul>

我只是在ng repeat中放置了一个不同的scope变量，在

$scope.myRepeat

之间重复数据，您可以使用一些单击函数在其中切换数据。您可以将其默认为具有

$scope.names

，因为它的值或空数组取决于您希望如何使用它

---

小提琴-

你可以试试这样的东西

<div class="select"><span class="active" ng-click="changeToName()">Names</span> <span ng-click="changeToID()">ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="name in myRepeat">{{ (name.name || name.id) }}</li>
</ul>

我只是在ng repeat中放置了一个不同的scope变量，在

$scope.myRepeat

之间重复数据，您可以使用一些单击函数在其中切换数据。您可以将其默认为具有

$scope.names

，因为它的值或空数组取决于您希望如何使用它

---

小提琴-

你可以试试这样的东西

<div class="select"><span class="active" ng-click="changeToName()">Names</span> <span ng-click="changeToID()">ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="name in myRepeat">{{ (name.name || name.id) }}</li>
</ul>

我只是在ng repeat中放置了一个不同的scope变量，在

$scope.myRepeat

之间重复数据，您可以使用一些单击函数在其中切换数据。您可以将其默认为具有

$scope.names

，因为它的值或空数组取决于您希望如何使用它

---

小提琴-

你可以试试这样的东西

<div class="select"><span class="active" ng-click="changeToName()">Names</span> <span ng-click="changeToID()">ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="name in myRepeat">{{ (name.name || name.id) }}</li>
</ul>

我只是在ng repeat中放置了一个不同的scope变量，在

$scope.myRepeat

之间重复数据，您可以使用一些单击函数在其中切换数据。您可以将其默认为具有

$scope.names

，因为它的值或空数组取决于您希望如何使用它

---

拉小提琴-

您可以做如下操作：

<div class="select"><span class="active">Names</span> <span>ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="item in lists()">{{item[prop]}}</li>
</ul>
<button onclick="list = 'id'"> Click to change to ID <button/>

var myApp = angular.module('myApp', []);

myApp.controller('testController', function ($scope) {
    $scope.prop = "name";
    $scope.lists = function() {
    var list;
    if ($scope.list === "names") {
        $scope.prop = "name";
        list = [
          {name : 'nameOne'},
          {name : 'nameTwo'},
          {name : 'nameThree'},
          {name : 'nameFour'},
          {name : 'nameFive'}
        ];
      }
    } else if ($scope.list === "id") {
      $scope.prop = "id";
      list = [
        {id : 'idOne'},
        {id : 'idTwo'},
        {id : 'idThree'},
        {id : 'idFour'},
        {id : 'idFive'}
      ];    
    }
    return list;

});

名称ID

{{item[prop]}

单击以更改为ID
var myApp=angular.module（'myApp'，[]）；
myApp.controller（'testController'，函数（$scope）{
$scope.prop=“name”；
$scope.lists=函数（）{
var列表；
如果（$scope.list==“名称”）{
$scope.prop=“name”；
列表=[
{name:'nameOne'}，
{name:'nameTwo'}，
{name:'nametree'}，
{name:'nameFour'}，
{name:'nameFive'}
];
}
}else if（$scope.list==“id”）{
$scope.prop=“id”；
列表=[
{id:'idOne'}，
{id:'idTwo'}，
{id:'idThree'}，
{id:'idFour'}，
{id:'idFive'}
];    
}
退货清单；
});

您可以执行以下操作：

<div class="select"><span class="active">Names</span> <span>ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="item in lists()">{{item[prop]}}</li>
</ul>
<button onclick="list = 'id'"> Click to change to ID <button/>

var myApp = angular.module('myApp', []);

myApp.controller('testController', function ($scope) {
    $scope.prop = "name";
    $scope.lists = function() {
    var list;
    if ($scope.list === "names") {
        $scope.prop = "name";
        list = [
          {name : 'nameOne'},
          {name : 'nameTwo'},
          {name : 'nameThree'},
          {name : 'nameFour'},
          {name : 'nameFive'}
        ];
      }
    } else if ($scope.list === "id") {
      $scope.prop = "id";
      list = [
        {id : 'idOne'},
        {id : 'idTwo'},
        {id : 'idThree'},
        {id : 'idFour'},
        {id : 'idFive'}
      ];    
    }
    return list;

});

名称ID

{{item[prop]}

单击以更改为ID
var myApp=angular.module（'myApp'，[]）；
myApp.controller（'testController'，函数（$scope）{
$scope.prop=“name”；
$scope.lists=函数（）{
var列表；
如果（$scope.list==“名称”）{
$scope.prop=“name”；
列表=[
{name:'nameOne'}，
{name:'nameTwo'}，
{name:'nametree'}，
{name:'nameFour'}，
{name:'nameFive'}
];
}
}else if（$scope.list==“id”）{
$scope.prop=“id”；
列表=[
{id:'idOne'}，
{id:'idTwo'}，
{id:'idThree'}，
{id:'idFour'}，
{id:'idFive'}
];    
}
退货清单；
});

您可以执行以下操作：

<div class="select"><span class="active">Names</span> <span>ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="item in lists()">{{item[prop]}}</li>
</ul>
<button onclick="list = 'id'"> Click to change to ID <button/>

var myApp = angular.module('myApp', []);

myApp.controller('testController', function ($scope) {
    $scope.prop = "name";
    $scope.lists = function() {
    var list;
    if ($scope.list === "names") {
        $scope.prop = "name";
        list = [
          {name : 'nameOne'},
          {name : 'nameTwo'},
          {name : 'nameThree'},
          {name : 'nameFour'},
          {name : 'nameFive'}
        ];
      }
    } else if ($scope.list === "id") {
      $scope.prop = "id";
      list = [
        {id : 'idOne'},
        {id : 'idTwo'},
        {id : 'idThree'},
        {id : 'idFour'},
        {id : 'idFive'}
      ];    
    }
    return list;

});

名称ID

{{item[prop]}

单击以更改为ID
var myApp=angular.module（'myApp'，[]）；
myApp.controller（'testController'，函数（$scope）{
$scope.prop=“name”；
$scope.lists=函数（）{
var列表；
如果（$scope.list==“名称”）{
$scope.prop=“name”；
列表=[
{name:'nameOne'}，
{name:'nameTwo'}，
{name:'nametree'}，
{name:'nameFour'}，
{name:'nameFive'}
];
}
}else if（$scope.list==“id”）{
$scope.prop=“id”；
列表=[
{id:'idOne'}，
{id:'idTwo'}，
{id:'idThree'}，
{id:'idFour'}，
{id:'idFive'}
];    
}
退货清单；
});

您可以执行以下操作：

<div class="select"><span class="active">Names</span> <span>ID</span></div>
<ul ng-app="myApp" ng-controller="testController">
    <li ng-repeat="item in lists()">{{item[prop]}}</li>
</ul>
<button onclick="list = 'id'"> Click to change to ID <button/>

var myApp = angular.module('myApp', []);

myApp.controller('testController', function ($scope) {
    $scope.prop = "name";
    $scope.lists = function() {
    var list;
    if ($scope.list === "names") {
        $scope.prop = "name";
        list = [
          {name : 'nameOne'},
          {name : 'nameTwo'},
          {name : 'nameThree'},
          {name : 'nameFour'},
          {name : 'nameFive'}
        ];
      }
    } else if ($scope.list === "id") {
      $scope.prop = "id";
      list = [
        {id : 'idOne'},
        {id : 'idTwo'},
        {id : 'idThree'},
        {id : 'idFour'},
        {id : 'idFive'}
      ];    
    }
    return list;

});

名称ID

{{item[prop]}

单击以更改为ID
var myApp=angular.module（'myApp'，[]）；
myApp.controller（'testController'，函数（$scope）{
$scope.prop=“name”；
$scope.lists=函数（）{
var列表；
如果（$scope.list==“名称”）{
$scope.prop=“name”；
列表=[
{name:'nameOne'}，
{name:'nameTwo'}，
{name:'nametree'}，
{name:'nameFour'}，
{name:'nameFive'}
];
}
}else if（$scope.list==“id”）{
$scope.prop=“id”；
列表=[
{id:'idOne'}，
{id:'idTwo'}，
{id:'idThree'}，
{id:'idFour'}，
{id:'idFive'}
];    
}
退货清单；
});

我就是这样做的。如果我有更多的时间，我会将整个事情构建到它自己的指令（bu）中