Question

我正在尝试动态绑定一个＆lt;标签集＆GT;基于下拉列表的选定值。这是我的app.js

var app = angular.module('app',['ui.bootstrap']);
app.controller('tabCtrl',function($scope,$http){
    $scope.countryList=[{name:'Canada',id:'ca'},{name:'United States',id:'us'}];
    $scope.selectedCountry =$scope.countryList[1].id;
    $scope.init = function() {
       $scope.countries =[{countryName:"ca"},{countryName:"us"}];
       $scope.countries[0].tabs=[{title:"CA Title 1"},{title:"CA Title 2"}];
       $scope.countries[1].tabs=[{title:"US Title 1"},{title:"US Title 2"}];
    };
    $scope.switch = function(){
        console.log($scope.selectedCountry);
    }
});

这是我的jsp页面。

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html ng-app="app">
<head>
    <script src="<c:url value="/resources/javascript/angular.min.js" />"></script>
    <script src="<c:url value="/resources/javascript/ui-bootstrap-tpls-0.12.0.min.js" />"></script>
    <script src="<c:url value="/resources/javascript/app.js"/>"></script>
    <link href="<c:url value="/resources/style/bootstrap.min.css" />" rel="stylesheet">
    <title></title>
</head>
<body>


<br />
<div ng-controller="tabCtrl"  >
    <!--<select ng-model="selectedCountry" ng-options="c.id as c.name for c in countryList"  ng-change="switch()" />-->

    <form name="frm" ng-submit="submit()" data-ng-init="init()">
        <div ng-repeat="c in countries|filter:{countryName:selectedCountry}">
            <tabset>
                <tab ng-repeat="t in c.tabs" heading="{{t.title}}">

                </tab>
            </tabset>

        </div>
        <button class="btn btn-primary" type="submit">Submit</button>
    </form>
</div>
</body>
</html>

我有两个绑定，一个用于下拉列表，一个用于tabset。我的问题是如果我添加＆lt;选择＆gt;，然后我的tabset没有显示.. 请帮忙。谢谢

Answer 1

这是因为默认情况下ng-options按对象引用进行跟踪。如果您想按id进行跟踪，则应添加以下track by子句：

ng-options="c.id as c.name for c in countryList track by c.id"

然后，当您初始化selectedCountry时，您需要一个具有id属性的对象：

$scope.selectedCountry = { id: $scope.countryList[1].id }

否则，您的过滤器（{countryName:selectedCountry}）与countries数组中的任何内容都不匹配。这会导致<tabset>无法呈现。

Answer 2

请确保关闭选择标记

<select ng-model="selectedCountry" ng-options="c.id as c.name for c in countryList" ng-change="switch()"></select>

下面的工作演示

＆＃13;

var app = angular.module('app', ['ui.bootstrap']);

app.controller('tabCtrl', function($scope, $http) {
  $scope.countryList = [{
    name: 'Canada',
    id: 'ca'
  }, {
    name: 'United States',
    id: 'us'
  }];
  $scope.countries = [{
    countryName: "ca"
  }, {
    countryName: "us"
  }];
  $scope.selectedCountry = $scope.countryList[1].id;
  $scope.init = function() {

    $scope.countries[0].tabs = [{
      title: "CA Title 1"
    }, {
      title: "CA Title 2"
    }];
    $scope.countries[1].tabs = [{
      title: "US Title 1"
    }, {
      title: "US Title 2"
    }];
  };
  $scope.switch = function() {
    console.log($scope.selectedCountry);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app="app">



  <div ng-controller="tabCtrl" data-ng-init="init()">
    <select ng-model="selectedCountry" ng-options="c.id as c.name for c in countryList" ng-change="switch()"></select>



    <hr/>
    <form name="frm" ng-submit="submit()">
      <div ng-repeat="c in countries|filter:{countryName:selectedCountry}">




        <tabset>
          <tab ng-repeat="t in c.tabs" heading="{{t.title}}">

          </tab>
        </tabset>

      </div>
      <button class="btn btn-primary" type="submit">Submit</button>
    </form>


  </div>

＆＃13;

使用Angularjs绑定问题

2 个答案: