ng-show用按钮选择不同的真假方法

时间:2015-12-01 11:17:09

标签: angularjs ng-show

我试图通过按下按钮来显示/隐藏元素。

    <a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="dateFilter = computeShow(event.date)">Upcoming Events</a>
    <a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="dateFilter = computeToday(event.date)">Today Events</a>
    <a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="dateFilter = true">All the events</a>

在视图中,我有一个等于dateFilter的ng-show:

    <section ng-repeat="event in events" ng-show="dateFilter">

我在app.js中有逻辑

    $scope.computeShow = function(date){
      return (moment().format() <= date);
    }

    $scope.computeToday = function(date){
      return (moment().format() == date)
    }

但是当我按下&#34;即将发生的事件&#34;或者&#34;今天的事件&#34;,它总是错误的,没有显示任何事件。显示所有事件的按钮完美无缺。按任意按钮之前的默认行为是&#34; false&#34;,因此没有显示任何事件。

我试着这样做:

    ng-click="dateFilter = 'computeShow(event.date)'"
    ng-click="dateFilter = 'computeToday(event.date)'"

但它始终是真的,并显示所有事件。

为什么不工作?我在哪里可以放置&#34; computeShow(event.date)&#34;默认?

编辑:我尝试添加

    $scope.dateFilter = 'computeShow(event.date)';

有默认行为,但这总是&#34; true&#34;我也试过

    $scope.dateFilter = computeShow(event.date);

而且这个总是假的

我添加了一个小提琴我想要做的事情:https://jsfiddle.net/28f4edv3/6/

1 个答案:

答案 0 :(得分:2)

在按钮中,您传递namespace Combobox { public partial class Form1 : Form { SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conectionString"].ConnectionString); public Form1() { InitializeComponent(); con.Open(); using (SqlCommand command = new SqlCommand("SELECT [DISTRICT_NAME]FROM[JP_TP_MST] group by DISTRICT_NAME order by DISTRICT_NAME", con)) { try { SqlDataReader reader = command.ExecuteReader(); while (reader.Read()) { for (int i = 0; i < reader.FieldCount; i++) { comboBox1.Items.Add(reader[i].ToString()); } } } catch (SqlException error) { MessageBox.Show(error.Message); } } con.Close(); } private void comboBox1_SelectedIndexChanged(object sender, EventArgs e) { con.Open(); using (SqlCommand command = new SqlCommand("SELECT [TALUKA_NAME]FROM[JP_TP_MST]where DISTRICT_NAME like N'" + comboBox1.Text + "%' group by [TALUKA_NAME] order by TALUKA_NAME", con)) { try { SqlDataReader reader = command.ExecuteReader(); while (reader.Read()) { for (int i = 0; i < reader.FieldCount; i++) { comboBox1.Items.Add(reader[i].ToString()); } } } catch (SqlException error) { MessageBox.Show(error.Message); } } con.Close(); event,因为按钮不在undefined的范围内。我修改了逻辑。它会以你想要的方式工作。

<强> HTML

ng-repeat

<强>脚本

<div ng-app="app">
    <div ng-controller="MainController"> 
        <a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="showEvents = 'upcomming'">Upcoming Events</a> <br> 
        <a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="showEvents = 'today'">Today Events</a> <br> 
        <a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="showEvents = 'all'">All the events</a> <br><br>

        <section ng-repeat="event in events" ng-show="computeShow(event, showEvents)">{{event.title}}</section>
    </div>
</div>

<强> See the Fiddle Here

我在这里使用angular.module('app', []). controller('MainController', ['$scope', function ($scope) { $scope.dateFilter = 'computeShow(event.date)'; $scope.computeShow = function (event, showEvents) { if (showEvents === 'upcomming' && moment(event.date).isAfter(moment())) { return true; } else if (showEvents === 'today' && moment().isSame(event.date, 'day')) { return true; } else if (showEvents === 'all') { return true; } return false; } $scope.events = [{ title: "hello", date: "2015-11-29" }, { title: "awesome event", date: "2015-12-1" }, { title: "another event", date: "2015-10-31" }, { title: "fancy event", date: "2015-12-2" }, { title: "today event", date: "2015-12-1" }, ]; }]); 个函数momentisAfter来比较日期。