Question

我们有这个JSON

{
  "Day": "Monday",
  "Start_Time": "08:00"
},
{
  "Day": "Tuesday",
  "Start_Time": "10:00"
},
{
  "Day": "Thursday",
  "Start_Time": "08:00"
}

所以我试图让这几天出现在带有这些选项的html select项目中。像这样的东西

<select>
 <option>Monday 08:00</option>
 <option>Tuesday 10:00</option>
 <option>Thursday 08:00</option>
</select>

当用户更改选项时，我想打印出他制作的新选项，这里我被卡住了。

到目前为止我所做的一切。

  <select ng-if="student.diwro" >
                    <option ng-repeat="x in modules" ng-selected="student.diwro == x.Anatheseis_Id" >{{x.Day}} {{x.Start_Time}}</option>
                  </select>

但是html元素option没有ng-change。

我是否知道如何在变更日控制日志？

非常感谢！

Answer 1

<select ng-if="student.diwro" ng-change="change()" ng-model="selectedValue">
    <option ng-repeat="x in modules" ng-selected="student.diwro == x.Anatheseis_Id" >{{x.Day}} {{x.Start_Time}}</option>
</select>

Answer 2

使用ng-options，可以更加自定义，

'use strict';

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope){
$scope.student = {}
    $scope.modules = [
        {
            "key": "all",
            "value": "For any event on all my projects"
        },
        {
            "key": "selected",
            "value": "For any event on the selected projects only..."
        },
        {
            "key": "only_my_events",
            "value": "Only for things I watch or I'm involved in"
        },
        {
            "key": "only_assigned",
            "value": "Only for things I am assigned to"
        },
        {
            "key": "only_owner",
            "value": "Only for things I am the owner of"
        },
        {
            "key": "none",
            "value": "No events"
        }
    ];

$scope.setdiwro = function()
{
alert($scope.student.diwro.key)
}
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        {{message}} <br />
        
        <!--Options value is defualt 0, 1 ... and it's non change able -->
        <span>Default Otions:</span>
        
 <select ng-model="student.diwro" ng-options="x.key for x in modules" ng-change="setdiwro()">
            <option value="">Select A Value</option>
</select>
        <br />
    
        <br />                
    </div>
</div>

具有ng-change的Angular 1.5选项

2 个答案: