Question

我必须创建一个选择框，我可以选择一个名称，在我选择名称后，我必须显示2个值， dateOfBirth 和dateOfBirth与过滤器，这样你就可以看到年龄（对于例子19岁）

但我的问题是它显示了dateOfBirth的所有值。

为了更好地理解，请观看：http://jsfiddle.net/9obhfm5c/1/

模板：

<div  ng-app="mainApp">
<div ng-controller="ExampleController">
        the birthday of
        <select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
              <option ng-repeat="option in data.availableOptions" value="{{option.dateOfBirth}}">
                  {{option.vn}}
             </option>
        </select>
      is {{data.repeatSelect}} and is <span ng-model="data.repeatSelect" ng-repeat="option in data.availableOptions | filter:data.repeatSelect">{{ option.dateOfBirth | ageFilter }}</span> years old
      <br/><br/>
</div>

JavaScript代码：

var mainApp = angular.module("mainApp", []);
mainApp.controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    repeatSelect: null,
    availableOptions: [
      {vn:'Mike', an:'Johnson', dateOfBirth: '1996-03-11'},
      {vn:'Curry', an:'Muisjes', dateOfBirth: '1992-03-11'},
      {vn:'Jan', an:'Peters', dateOfBirth: '1995-03-11'}
    ],
    };
}]);
mainApp.filter('ageFilter', function () {
        function calculateAge (birthday) {
            var date = new Date(birthday);
            var ageDifMs = Date.now() - date.getTime();
            var ageDate = new Date(ageDifMs);
            return Math.abs(ageDate.getUTCFullYear() - 1970);
        }

        return function (birthdate) {
            return calculateAge(birthdate);
        };
    });

您可以看到它输出所有年份（192320），当您选择1个名称时，它会显示一个正确的值，但我希望它首先被清空，然后选择它显示年龄。

Answer 1

我不知道它对你有好处，但是你可以在没有选择的情况下隐藏它。

你可以通过添加ng-show =＆＃34; data.repeatSelect！= null＆＃34;来实现这一点。

http://jsfiddle.net/arielcessario/9hfvkL32/

<div ng-controller="ExampleController">
        the birthday of
        <select name="repeatSelect" id="repeatSelect" ng-model="data.repeatSelect">
              <option ng-repeat="option in data.availableOptions" value="{{option.dateOfBirth}}">
                  {{option.vn}}
             </option>
        </select>
      is {{data.repeatSelect}} and is <span **ng-show="data.repeatSelect != null"** ng-model="data.repeatSelect" ng-repeat="option in data.availableOptions | filter:data.repeatSelect">{{ option.dateOfBirth | ageFilter }}</span> years old
      <br/><br/>
</div>

选择show 2值后的AngularJS

1 个答案: