Question

我是AngularJs的新手，我想创建一个Select列表，当选择一个选项时打开对应文件。这是我的main.html

<select ng-model="model.options" >
  <option value="1"> 1</option>
  <option value="2"> 2</option>
  <option value="3"> 3</option>
</select>


<div ng-show="model != null" class="main" ng-controller = "TestCtrl">
   <li class="artist cf" ng-repeat="item in data">
      <div class="info">
        <h1>{{item.name}}</h1>
      </div>
    </li>
</div>

这是控制器

angular.module('myApp')
  .controller('TestCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('data.json').success(function(data) {
    $scope.data = data;
  });
}]);

有人可以帮我做这样的事吗？

$http.get('data-$SELECTED-OPTION-VALUE.json').success(function(data) {

Answer 1

首先，确保选择在里面由TestCtrl控制的元素，而不是在外面。

然后，使用ng-change，以便每次所选值更改时调用函数：

<select ng-model="model.options" ng-change="displayData()">

并在控制器中：

$scope.displayData = function() { $http.get('data-' + $scope.model.options + '.json').success(function(data) { $scope.data = data; }); };

请注意，这里的命名很糟糕：为什么将model.options（复数形式）命名为包含一个选项的变量？

Answer 2

首先，您应将ng-controller属性放在更高阶的标记中，例如<body>或包装<div>。这是必要的，因此您的所有相关HTML元素（例如<select>和<div>）共享相同的控制器范围。

其次，你的选择中的绑定是错误的。而不是ng-model="model.options"，您需要使用在控制器范围内声明的变量。 EJ：

在你的控制器中：

.controller('TestCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.selectedValue = 0;
}

在您的HTML中

<div class="wrap" ng-controller="TestCtrl">
  <select ng-model="selectedValue" >
    <option value="1"> 1</option>
    <option value="2"> 2</option>
    <option value="3"> 3</option>
  </select>

  <div ng-show="model != null" class="main">
    ...
  </div>
</div>

然后，您可以将数据加载绑定到按钮单击或类似的东西，调用范围函数，您将在其中使用selectedValue范围变量。 EJ：

在您的HTML中，<div class="wrap">内：

<input type="button" value="load data" ng-click="loadData()" />

在你的控制器中：

.controller('TestCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.selectedValue = 0;

  ...

  $scope.loadData = function() {
    $http.get('data-' + $scope.selectedValue + '.json').success(function(data) {
        ...
    }
  }
}

Answer 3

您可以在每个列表项上附加ngClick事件，例如

<li class="artist cf" ng-repeat="item in data" ng-click="select(item)>
  <div class="info">
    <h1>{{item.name}}</h1>
  </div>
</li>

然后你可以在你的TestCtrl中有一个处理onclick处理程序

的函数

.controller('TestCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('data.json').success(function(data) {
  $scope.data = data;

  $scope.select = function (item) {
       // do something with the item here.    
  };
});

Answer 4

看到我误解了你的第一个答案，你可以_.chain(myArray ) .groupBy("id") .map(function(value, key) { return { id: key, rendering : sum(_.pluck(value, "rendering")), completed: sum(_.pluck(value, "completed")) } }) .value();你的model.options并根据它进行查询

watch

Angularjs访问控制器中的属性

4 个答案: