标签: angularjs-ng-change

我有这个网格选项:

$scope.ngOptions = {
        data: 'data',
        columnDefs: [
             {field: 'Status', displayName: "Status", cellTemplate: selectTableTemplate, enableCellEdit: true},
             {cellTemplate: '<button ng-click="update(col, row)">' + Save + '</button>', enableCellEdit: false }]
    };


var selectTableTemplate = "<select ng-model='Status' ng-change='changeToFirst(Status, row)'>" +
                                '<option value="1" class="ng-binding" ng-selected="COL_FIELD == 1">' + 1 + "</option>" +
                                '<option value="2" class="ng-binding" ng-selected="COL_FIELD == 2">' + 2 + "</option>"</select>";

编辑: 如何在ng-change功能中changeToFirst获得点击元素并选择第一个选项？

我是这样做的:

 row.elm.children().find('select').find('[value=1]').prop('selected', true);

但我确定这不是正确的方法

我正在AngularJS中实现一个简单的微调控件,我想对用户输入和+/-按钮的更改做出反应.这是我的HTML:

<input type='button' ng-click="MyProperty = MyProperty - 1" value="-">
<input type='text' ng-model="MyProperty" ng-change="log('changed from ngChange')">
<input type='button' ng-click="MyProperty = MyProperty + 1" value="+">

但是,这将仅跟踪"用户更改",ngChange因为根据文档,仅支持用户交互更新

所以现在我看着$scope.$watch弗雷德里克建议:

$scope.$watch('MyProperty', function() {
  $scope.log('changed from $watch');
});

请参阅plunker演示

但这似乎并不正确.

1. 首先它不是声明性的,你必须搜索代码MyTestProperty才能找到这个绑定.
2. 如果你想要放在$scope.log一个单独的模型中,你必须注入$scope或在控制器中进行绑定.据我所知,这两种方式都不被认为是最好的实践.

有些人认为,$watch由于其他一些原因,这通常是件坏事.但是那里建议的解决方案(将直接调用logngClick)对我来说并没有太大的不同.基本上你必须手动跟踪所有的变化,如果有新的演员,你必须在那里复制你的逻辑.

所以问题是:有没有一种方法可以让你在没有$ watch的情况下自动跟踪模型更新？如果现在有这样的方式,那么实现自己的derective的想法有多糟糕？

我在转发器中有一个下拉列表,应该切换我的自定义"必需"属性.我尝试了ng-show但是display ="none"属性就是所有添加的.我的选择是: -

1-添加/删除输入字段并设置bird.Stuff,而不仅仅是隐藏它,因为它仍然是必需的.

2-在输入字段上添加/删除"required"属性.

JS

$scope.validateParticipants = function (type) {
    if (type == "Single") {
        this.donation.Participants = "1";
    }
    else
        this.donation.Participants = "";
}

HTML

 <div ng-repeat="bird in animalTest.birds">
    @(Html.DropDownList("Type", (IEnumerable<SelectListItem>)ViewBag.BirdList, new { ng_model = "bird.Type", ng_change = "validateRequired(bird.Type)", required = "Type is required" }))
    ...
    <input data-ng-show="bird.Type == 'Endangered'" id="stuff" type="number" data-ng-model="bird.Stuff" required = "Number of Volunteers required"/>  
</div>

我在这里先向您的帮助表示感谢!

由于代码优于1000字,我创建了一个plunker以显示我的问题:http://bit.ly/1uiR2wy

给定特定的DOM元素,事情就是我有一个带有ng-change的输入复选框,我想添加一个ng-click到包含它的li,以便能够在整个区域中单击.这个新的ng-click使ng-change中的方法发生两次.对于正在发生3次的SPAN描述2来说更糟糕的是.

<li class="odd" ng-click="changeToggleModel($event)">
  <span class="overcomeDescription ellipsis-overflow">span description</span>
  <label>      
    <span>SPAN DESCRIPTION 2</span>
    <input type="checkbox" ng-change="toggleSelection($event)" ng-model="isSelected">
  </label>
</li>

我尝试过stopPropagation,似乎没有解决问题.关于它的任何想法？如果您检查了plunker并打开控制台,您将完全看到问题.

在此先感谢大家

使用jquery-select2(不是 ui-select)和angular,我试图将值设置为ng-model.

我已经尝试使用$watch和ng-change,但似乎没有与选择2选择一个项目后开火.

不幸的是,我使用的是购买的模板,不能使用angular-ui.

HTML:

<input type="hidden" class="form-control select2remote input-medium"
    ng-model="contact.person.id"
    value="{{ contact.person.id }}"
    data-display-value="{{ contact.person.name }}"
    data-remote-search-url="api_post_person_search"
    data-remote-load-url="api_get_person"
    ng-change="updatePerson(contact, contact.person)">

ClientController:

$scope.updatePerson = function (contact, person) {
    console.log('ng change');
    console.log(contact);
    console.log(person);
} // not firing

$scope.$watch("client", function () {
    console.log($scope.client);
}, true); // not firing either

JQuery集成:

var handleSelect2RemoteSelection = function () {
    if ($().select2) {
        var $elements = $('input[type=hidden].select2remote');
        $elements.each(function(){
            var $this = $(this);
            if ($this.data('remote-search-url') && $this.data('remote-load-url')) {
                $this.select2({
                    placeholder: …

我有一个div具有ng-style属性,其rgba值使用$ scope变量作为alpha值:

ng-style="{'background-color': 'rgba(255,0,0,{{ alphaValue / 100}})'}"

我有一个输入滑块,可以更改alphaValue的值.我可以使用console.log查看值的更改,并在html中的调试器中更新rgba值.它只是没有在视图中应用.

有什么建议？

我试图创建一个读取输入值并触发一系列true / false的函数，但是下面的代码不断返回“未定义passStrength”。从我发现，Angular不支持oninput。如何在Angular中实现呢？

在我的控制器内：

$scope.passStrength = function(input) {
    if (input.value.toLowerCase().indexOf(/[a-z]/) > -1) {
        $scope.lwrChar = true;
        console.log('lower ' + $scope.lwrChar);
    } else if (input.value.toUpperCase().indexOf(/[A-Z]/) > -1) {
        $scope.uprChar = true;
        console.log('upper ' + $scope.uprChar);
    } else if (input.value.indexOf() == !isNaN(n)) {
        $scope.nbrChar = true;
        console.log('number ' + $scope.nbrChar);
    } else if (input.value.length >= 8) {
        $scope.countChar = true;
        console.log('count ' + $scope.countChar);
    }
};

在我的标记中：

<input id="password" oninput="passStrength()" />

 <input type="checkbox" value="" ng-model="filterPrivateDocCheckBox" ng-click="dl.filterPrivateDocument(filterPrivateDocCheckBox, $event)">
 <input st-search="target" class="input-sm form-control"  ng-model="dl.documentTarget" ng-change="dl.change()" />

function filterPrivateDocument(val) 
{
    if(val)
    this.documentTarget = 'Private';
}

当我点击checkBox时,我将值设置为文本框,但是我看到ng-change事件没有被触发.为什么？

而且当我在文本框中键入一些值时,我发现ng-change事件被触发了.

解决这个问题的任何方法？

我有问题要了解ng-change的工作原理.我有一个邀请加入拍卖的用户列表.我想用一个复选框来做这件事.如果选中该用户,则必须将其名称保存到数组中.后来我会邀请他们(我只知道怎么做).但我不明白如何使用复选框.我做了这样的事情:

<ul class="list-group" ng-repeat="user in users">
    <li class="list-group-item" ng-hide="user.name == profile">
        <img ng-src="{{user.img}}" class="image2" >
        <div class="username"> {{user.name}}</div>
        <div class="userrole"> {{user.role}} </div>
        <div class="usercompany">{{user.company}}</div>
        <input type="checkbox"  ng-model="isChecked" ng-change="insertinvited(user.name)">
    </li>
</ul>

在我的控制器中:

$scope.invited = [];
$scope.insertinvited= function (name) {
    if($scope.isChecked){
        $scope.invited.push(name)
    } else {
        console.log($scope.invited);
    }
};

但是这不起作用,在控制台中数组总是空的.

我有这样的选择

<select ng-model="id_select" ng-options="fide.id as fide.name for fide in fides" ng-change="loadInfo()">
   <option value="" selected disabled>Seleccionar</option>
</select>

在我的控制器中,我有这个

RestService.getFides().then(function(fides){

   $scope.id_select = fides;
   if(typeof $rootScope.selected_id !== 'undefined')
   {
      $scope.id_select = $rootScope.selected_id
   }
});

$scope.loadInfo = function() {
  alert("triggered!!");
}

我的选择是按预期加载fides但是当我尝试使用$ rootScope的值设置我的选择值时,ng-change函数不会触发loadInfo()但是当我在视图中选择它时它工作正常.

我有什么不对的想法吗？

提前谢谢你的帮助:)