如何使用外部JS操作AngularJS范围属性

Question

我有一个表格（html）充满了AngularJS提供的一些数据。 现在，我想更改范围内每个条目的特定属性。 如何访问和操纵示波器中元组的特定属性？

我尝试了以下JavaScript代码中所示的方法。 一切正常，直到警报弹出。 警报$scope.selects.day = 'Superhero';下面的代码$scope.selects.day = 'Superhero'; 没有用 这是什么问题

HTML表格：

<select name="manipulate" onchange="change()">
    <option value"doSomething">Do Something</option>
    <option value"doSomethingElse">Do Something else</option>
</select>

<table>
    <tbody>
        <tr ng-repeat="select in selects | filter:model">
            <td>{{select.day}}</td>
            <td>{{select.subcategory}}</td>
        </tr>
    </tbody>

Angular JS：

var myApp = angular.module('myApp', ['ui.filters']);
myApp.controller('controller', function($scope) {

var content = [ 
    {subcategory: 'XYZ',day: 'Monday',},
    {subcategory: 'ABC',day: 'Tuesday',},
];

$scope.selects = content
});

Java脚本：

function change() {
    var appElement = document.querySelector('[ng-app=myApp]');
    var $scope = angular.element(appElement).scope();

    $scope.$apply(function() {

    //alert('Works until here')
    $scope.selects.day = 'Superhero';

    });
}

Answer 1

您尝试做的事情是非常错误的，您不应出于任何原因这样做。 如果您想随import和export一起添加其他js文件，这是一些文档，它很大，所以我不会覆盖这一部分，但是这里有很多答案（stackoverflow）：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

要修复您的代码，首先要对选项字段缺少value= ：

<option value="doSomething">Do Something</option>
<option value="doSomethingElse">Do Something else</option>

其次，我不知道过滤器是什么：模型会这样做，所以我只删除该部分，您需要使用angularjs ng-change而不是javascript onchange：

<select name="manipulate" ng-model="someModel" ng-change="change()">

创建更改函数，该函数将遍历$ scope上selects的所有属性并更改'day'属性的值。

function change() {
  $scope.selects = $scope.selects.map(val => {
    val.day = "Superhero"
    return val;
  });
}

最后放置更改功能并在$ scope上进行选择：

angular.extend($scope, {
  selects: content,
  change,
})

另外，也无需手动触发摘要循环，因为angularjs会为您完成此操作，因此请避免使用它。

一切都在这里： https : //jsfiddle.net/pegla/r6Ly8j8L/1/